Question

我正在尝试在tr的红色table红色边框和蓝色边框之间获得〜20 px的间距，但只能在tbody中实现不是在thead中。我尝试在tr上使用填充，但这不起作用。

table {
  width: 100%;
  border: 3px solid blue;
   border-collapse: collapse;
}

thead {
  background-color: green;
}
tr {
 height:50px;
}

tr {
  box-sizing: border-box;
  border-bottom: 2px solid red;
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

有什么建议吗？

Answer 1

您可以使用的一种技巧是水平缩放tr中的tbody，以使它们不再像桌子一样宽。
如果这样做的话，还必须调整其他一些CSS。例如您不能再使用border-collapse: collapse，因为这会使水平线连接到垂直线。

table {
  width: 100%;
  border: 3px solid blue;
  border-spacing: 0;
}

thead {
  background-color: green;
}

tr {
  height: 50px;
  border-bottom: 2px solid red;
}

tbody tr {
  transform: scaleX(.95);
}

tbody td {
  border-bottom: 2px solid red;
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

Answer 2

我会尝试使用:after选择器的<td>来显示底行，而不是使用<tr>边框但这有点棘手。

但是，使用此技巧，您可以在第一列上向左填充空白（将在底部显示行）。并且您可以使用td:after来更改最后一个calc(100 - 20px)的宽度

table {
  width: 100%;
  border: 3px solid blue;
   border-collapse: collapse;
}

thead {
  background-color: green;
}
tr {
 height:50px;
}

tr {
  box-sizing: border-box;
}
tbody td {
  position: relative;
}
tbody td:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: red;
  bottom: 0;
}
tbody tr:last-of-type td:after {
  display: none;
}
td:first-of-type {
  padding-left: 20px;
}

tbody td:last-of-type:after {
  width: calc(100% - 20px);
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

表格中水平边框和垂直边框之间的空间将被忽略

2 个答案: