javascript - 在表格列的 CSS display none 和 display block 之间切换会创建一个奇怪的边框......为什么？

Question

看看表中最后一列周围那个奇怪的边框...

表格看起来像:

<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'); 

因此，当任何具有编辑类的内容设置为“无”时，整个“编辑选项”列根本不会显示在屏幕上。这种切换有效。唯一的问题是，当显示编辑类时，此列周围有一个奇怪的边框。我想知道是否有人知道为什么以及如何解决它。我的按钮通过表格下方的编辑/规范类切换可见性(它们在 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 来实现大部分这一切，我绝不会将自己描述为当前或过去的前端开发人员...也许是 future ，但谁知道。

Answer 1

那是因为你正在触发 block 显示，但那些应该是 display: table-cell 而不是