Question

我的桌子上有折叠的边框。有些单元格周围有边框。当我向该表中添加行时，给定列中的所有单元格突然在Firefox中变为边框。

CSS很简单

table {
  border-collapse: collapse;
}

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

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

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

有什么解决方法？

我不能使用边框分隔。使用“轮廓”会使边界加倍，并且看起来很糟。我宁愿不强制重新设置样式，因为我担心性能。我还能做什么？

Answer 1

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

$(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>

Answer 2

我知道您提到过不重塑样式的偏好，但是到目前为止，我发现该问题的唯一补救方法是消除边框折叠。

table {
/* REMOVED border-collapse*/
}

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

Answer 3

是的，问题是边框崩溃，但是如果您改用表格上的cellspacing =“ 0”和css中的一个小技巧（如果附近有2个或更多.has-errors，则删除左侧边框），它也与firefox一起使用！

$(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>

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

3 个答案: