删除所有 td 的 tr 与 Mozilla 中的其他 tr 的边界问题

Question

我有一个 id agenda_tbl 的表格，它是 ajax 响应的形式。该表的行是从 while 循环中创建的。

<table id="agenda_tbl">
<thead>......</thead>
<tbody>
  <tr>
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data3</td>
     <td><input type="button" class="approve_btn"</td>
 </tr>
 <tr>
  .........
 </tr>
</table>

上表的CSS

#agenda_tbl
{
margin-top:5px;
border-collapse: collapse;
font-size: 12px;
}
#agenda_tbl td
{
border:1px solid black;
padding:3px;
 }

我已经为第一页的按钮编写了点击事件。当我点击按钮时，我需要完全隐藏当前行。我已经用下面的jquery做到了。

$(document).on('click','.approve_btn',function(e)
{
    var element = $(this);
    if(confirm('Do you approve this agenda?'))
    {
       element.closest('tr').remove();
    //this hides the current row.Also used hide(),made html() of row 
     //to empty.But doesnt work
    }

});

这个脚本对我来说可以正常工作，但是相邻行的边框丢失了。我用谷歌搜索了很多，但找不到解决方案。

屏幕截图1 单击任意行的批准按钮后，相邻行将失去边框。

Answer 1

试试这个。我知道边框更厚，但它似乎已经解决了已知的 FX 1px 行错误 - 至少在我这里有的 Fx 31 中

DEMO

#agenda_tbl {
    margin-top:5px;
    border-spacing: 0; 
/* when removing the following line, 
   the lines may be thick but it works in OSX FX 40.0.3  
   even with 1px border */
    border-collapse: collapse; 
    font-size: 12px;
}
#agenda_tbl td {
    padding:3px;
    border:2px solid black;
}