表：添加边框时，单元格展开

Question

我有一张固定宽度和高度的桌子，通常，它会均匀地分布单元格以适应给定的宽度和高度。但是，一旦我在仅部分单元格上添加边框，单元格就不再均匀分布。

看起来边框的细胞比其他细胞的宽度更大。此外，边框较厚的单元格比边框较薄的单元格宽。

以下是一些显示会发生什么的代码。绿色单元格为border-left，红色和蓝色单元格没有右边框或左边框。

<table style="width: 500px; height: 1000px; border-spacing: 0; background-color: gray;">
  <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>

</table>

如果这是特定于浏览器的问题，请参阅Mac OS X High Sierra上的 Chrome 66 屏幕截图。

我已在其他浏览器中确认过，同样的事情发生了：

• Safari 11.1
• Opera 52
• Firefox 57

我的问题是： 导致此问题的原因和如何修复？请注意，在我的实际代码中，我有不同厚度的边框。

Answer 1

我不确定是什么导致它，但我有一个解决方法。

在所有单元格周围添加透明边框（使用!important）：

td { border: 1px solid transparent !important; }

然后您还必须将!important添加到您添加边框的每个单元格中。

<td style="background-color: green; 
    border-left: white solid 1px !important; 
    border-top: white solid 1px !important;">
</td>

我尝试添加box-sizing来修复/了解正在发生的事情，但似乎没有效果。表格的整体大小可能会受到增加边框的影响;你必须检查一下。

Answer 2

我遇到了同样的问题，直到我为所有TD指定了任意10％的值

显然，当根本没有指定大小时，就会发生这种情况。