第一行中的单元格 - 边框的一半不在边缘区域中

Question

为什么第一个单元格左边框的一半不在桌子的边缘区域？

仅适用于第一行中的单元格：

在其他行中，边框的一半位于边缘区域：

图像上的暗边框是表格容器，表格左边设置为0px。我使用折叠边界模型。

＆＃13;

＆＃13;

body{
  margin-left:50px;
  border:2px solid grey;
}
table{
  border-collapse:collapse;
  margin-left:0px;
}
.cellborder{
  border-left:20px solid orange;
}
td{
  background-color:gainsboro;
}

＆＃13;

<table>
  <tr>
    <td class="cellborder">data1</td>
  </tr>
  <tr>
    <td class="">data2</td>
  </tr>
  <tr>
    <td>data3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

可能是，因为<table>将第一行作为角色模型来组织下一个的宽度和内容。我能够通过在第一个中提供一个空的<tr>来修复它：

＆＃13;

＆＃13;

body {
  margin-left: 50px;
  border: 2px solid grey;
}
table {
  border-collapse: collapse;
  margin-left: 0px;
}
.cellborder {
  border-left: 20px solid orange;
}
td {
  background-color: gainsboro;
}

＆＃13;

<table>
  <tr></tr>
  <tr>
    <td class="cellborder">data1</td>
  </tr>
  <tr>
    <td class="">data2</td>
  </tr>
  <tr>
    <td>data3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

预览