行左边框的表不一致行为

Question

我有一个表格，用户可以在其中设置特定行上的标记，标记是行左边框的 5px 边框。

当我在第一行设置边框时，表格被填充了几个像素，但如果我在另一行设置边框并且不是第一行，表格不会被填充。

<table>
<tbody>
  <tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
  <tr><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>

<table>
<tbody>
  <tr><td>A</td><td>A</td><td>A</td></tr>
  <tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>

这是预期的行为吗？如果是，我该如何解决？我在 Firefox 和 Chrome 上进行了测试，它们的行为方式相同。

小提琴：https://jsfiddle.net/2hwuq8ed/

Answer 1

虽然我找不到任何具体的文档来证实这一点，但根据我对 html 表格的了解，通过实践经验（主要是构建 html 通讯模板的许多小时），第一行可以影响任何行的定位在诸如此类的独特情况下遵循。这是由于表格格式的性质造成的，可以视为预期行为。

考虑通过为所有 非.marked 的单元格声明相同宽度的透明边框来抵消通过将边框属性应用于第一行或单元格而创建的缺陷，例如：

tr:not(.marked) {
    border-left: 5px solid transparent;
}

Updated JSFiddle

table {
  border-collapse: collapse;
}

tr {
  background-color: blue;
}
tr:nth-child(odd) {
  background-color: grey;
}
tr.marked {
  border-left: 5px solid green;
}
tr:not(.marked) {
    border-left: 5px solid transparent;
}

td:first-child {
  width: 100px;
}
td {
  width: 50px;
}

<table>
<tbody>
  <tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
  <tr><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
  <tr><td>A</td><td>A</td><td>A</td></tr>
  <tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>

如果您需要完全去除表格前面的空白，请考虑将视觉标记应用到第一个嵌套表格单元格的 伪元素，例如：

tr.marked td:first-child:before {
    content: "";
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    background: green;
    width: 5px;
}

Updated JSFiddle

table {
  border-collapse: collapse;
}

tr {
  background-color: blue;
}
tr:nth-child(odd) {
  background-color: grey;
}

tr.marked td:first-child:before { /* additional */
    content: "";
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    background: green;
    width: 5px;
}

td:first-child {
  width: 100px;
  position: relative; /* required for absolutely positioned pseudo-elements */
}
td {
  width: 50px;
}

<table>
<tbody>
  <tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
  <tr><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
  <tr><td>A</td><td>A</td><td>A</td></tr>
  <tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
  <tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>

Answer 2

移除border-collapse并添加cellspacing="0" cellpadding="0"

 td{
      border:none
    }
    tr {
      background-color: blue;
    }
    tr:nth-child(odd) {
      background-color: grey;
    }
    tr.marked {
      border-left: 5px solid green;
    }

    td:first-child {
      width: 100px;
    }
    td {
      width: 50px;
    }


    <table cellspacing="0" cellpadding="0">
    <tbody>
      <tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
      <tr><td>B</td><td>B</td><td>B</td></tr>
      <tr><td>C</td><td>C</td><td>C</td></tr>
    </tbody>
    </table>

    <table cellspacing="0" cellpadding="0">
    <tbody>
      <tr><td>A</td><td>A</td><td>A</td></tr>
      <tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
      <tr><td>C</td><td>C</td><td>C</td></tr>
    </tbody>
    </table>