1

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

在此处输入图像描述

该表如下所示：

<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来完成大部分工作，我绝不会将我自己描述为当前或过去的前端开发人员......也许是未来，但谁知道呢。

4

2 回答 2

3

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

于 2013-03-07T18:36:14.393 回答
1

最好是使用一个按钮来显示和隐藏使用 jQuery 的单元格.toggle()。这是因为您不必为切换元素的“初始”显示而烦恼 - jQuery 为您完成。

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

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

参考资料：

于 2013-03-07T18:42:24.937 回答