添加行时 Firefox 单元格边框呈现错误

Question

我有一张带有折叠边框的表格。有些单元格周围有边界。当我向这个表中添加行时，突然给定列中的所有单元格在 Firefox 中都有边框。

CSS 很简单

table {
  border-collapse: collapse;
}

.has-errors {
  border: 2px solid red;
}

这里有一个 JSBin 来说明这个问题：https://jsbin.com/jopaxoyesu/edit?html,css,js,output

单击文档会添加行。如果单击一次，就可以了。再次单击，突然该列中的所有单元格都将具有左右边框。这只发生在 Firefox 中。

有什么解决方法？

我不能单独使用边框。 使用'outline'会使边框加倍并且看起来很糟糕。 我不希望强制重新设计，因为我担心性能。我还能做什么？

Answer 1

我知道您提到了不重新设计的偏好，但是到目前为止我发现的唯一解决此问题的方法是删除边框折叠。

table {
/* REMOVED border-collapse*/
}

.has-errors {
    outline: 2px solid red;
    -moz-outline: 2px solid red;
    outline-offset:-1px;
}

Answer 2

是的，问题是边框折叠，但是如果您在表格上使用 cellspacing="0" 并在 css 中使用一个小技巧（如果附近有 2 个或更多.has-errors，则删除左边框），它也适用于火狐！

$(document).on('click', function() {
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
});

.has-errors {
  border: 2px solid red;
}

.has-errors + .has-errors{
  border-left: none;
}

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>

Answer 3

如果你想保持边框折叠，你也可以使用轮廓代替边框

$(document).on('click', function() {
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
});

table {
  border-collapse: collapse;
}

.has-errors {
   outline: 2px solid red;
   -moz-outline: 2px solid red;
   outline-offset:-1px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>