Question

查看表格中最后一栏周围的奇怪边框......

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

因此，当编辑类的任何内容设置为“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来解决大部分问题，我绝不会将自己描述为目前或过去的前端开发人员......也许是未来但是谁知道。

Answer 1

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

Answer 2

最好是使用一个按钮来显示和隐藏使用jQuery .toggle()的单元格。这是因为你不必为打开元素的“初始”显示而烦恼--jQuery为你做这件事。

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

实现： http://jsfiddle.net/Dr3Cm/

参考文献：

jQuery .toggle()

在CSS显示无和表列的显示块之间切换会创建一个奇怪的边框...为什么？

2 个答案: