在CSS display none和表格列之間切換時會創建一個奇怪的邊界...爲什麼？

看看錶中的最後一列周圍的邊框怪異...在CSS display none和表格列之間切換時會創建一個奇怪的邊界...爲什麼？

enter image description here

表看起來像：

<table style="font-family: courier new; font-size: 0.75em" border="1" cellspacing="0" cellpadding="3"> 
<tbody> 
    <tr id="tableheader" class=""> 
     <th title="id">id</th> 
     <th title="old_name">old_name</th> 
     <th title="new_name">new_name</th> 
     <th class="edit" title="Edit Options" style="display: block; overflow: hidden;">Edit Options</th> 
    </tr> 
    <tr class="tableevenrow"> 
     <td data-col="id" valign="middle" align="left"><div>1</div></td> 
     <td data-col="old_name" valign="middle" align="left"><div>taco</div></td> 
     <td data-col="new_name" valign="middle" align="left"><div>bell</div></td> 
     <td class="edit" data-col="editoptions" valign="middle" align="left" style="display: block; overflow: hidden;"> 
     <div class="row0 col3 col_editoptions"> 
      <div class="edit" style="display: block; overflow: hidden;"> 
       <select id="dropdown_0"> 
        <option value="1">Confirm</option> 
        <option value="0">Decline</option> 
       </select> 
       <button id="submit_r0">Submit</button> 
      </div> 
     </div> 
     </td> 
    </tr>

，我有按鈕，基本上只是在這兩種狀態之間進行切換：

 $('.edit').css('display','none'); 
     $('.norm').css('display','block'); 

     $('.edit').css('display','block'); 
     $('.norm').css('display','none');

因此，當編輯類的任何內容設置爲「無」，那麼整個「編輯操作tions「列在屏幕上完全不顯示。這種切換工作。唯一的問題是，當顯示編輯類時，該列會在其周圍形成奇怪的邊框。我想知道是否有人知道爲什麼以及如何解決它。我的按鈕與表下方的編輯/標準類切換可見性（它們在div中），但邊框不會在它們周圍出現...

這是表格樣式的css ...繼承樣的），但我需要儘量避免改變這個，甚至是動態：

body   { background: #e8ccbb; } 
    .tableheader { background: #4d4e86; color: #ffffff; } 
    .tableoddrow { background: #c2bad4; } 
    .tableevenrow { background: #c2c3c2; } 
    #tableheader { background: #4d4e86; color: #ffffff } 
    #tableoddrow { background: #c2bad4 } 
    #tableevenrow { background: #c2c3c2 } 
    #hiliterow { background: #ffffff } 
    .menu_color { 
     background:#4d4e86; 
     background-image:-webkit-gradient(linear,left top,left bottom,from(#c2bad4),to(#4d4e86)); 
     background:-webkit-linear-gradient(top,#c2bad4,#4d4e86); 
     background:-moz-linear-gradient(top,#c2bad4,#4d4e86); 
     background:-o-linear-gradient(top,#c2bad4,#4d4e86); 
     background:-ms-linear-gradient(top,#c2bad4,#4d4e86); 
     background:linear-gradient(top,#c2bad4,#4d4e86) 
    }

也...側面說明...我使用PHP來讓大多數的這一點，絕不我會形容我的作爲目前或過去的前端開發人員......自己可能是未來，但誰知道。

來源

2013-03-07 gloomy.penguin

這是因爲你觸發塊顯示屏，但這些應該是'顯示：表cell'代替。 – 2013-03-07 18:17:39

好的。所以....我需要切換div和表列。所以...對於表格隱藏/顯示...我應該從顯示：table-cell和display-none ...？ – 2013-03-07 18:29:27

好的。真棒。有用。你想發佈一個答案或...？ – 2013-03-07 18:31:23

那是因爲你觸發塊顯示屏，但這些應該是display: table-cell代替

來源

2013-03-07 18:36:14

最好的辦法是使用一個按鈕來顯示和使用jQuery .toggle()隱藏單元格。這是因爲你不必擔心什麼是切換元素的「初始」顯示 - jQuery爲你做。

$('#my_button').click(function(){ 
    $('#el_to_toggle').toggle(); 
});

實現： http://jsfiddle.net/Dr3Cm/

參考文獻：

jQuery .toggle()

來源

2013-03-07 18:42:24 Michael

在CSS display none和表格列之間切換時會創建一個奇怪的邊界...爲什麼？

回答

相關問題