html - 表格边框底部的间距

Question

我有一个表格，我正在使用 CSS 来显示底部边框。

.inset {
    border-bottom: 1px solid #dadce0;
}

我希望左右两侧有一些空间，就像使用 <hr align="center" width="80%"> 一样但我根本不觉得这是可能的。

是否有任何我应该查看的属性或我应该研究的 CSS 技巧以保持表格完好无损并能够看到居中但仅占表格宽度 80% 的底部边框？

Answer 1

您可以将表格宽度设置为 80%(左右边距各留 10%)，然后使整个表格居中:

.inset {
  border-bottom: 1px solid #dadce0;
  width: 80%;
  margin: 0 auto;
  background-color: coral;
}

.inset td {
  text-align: center;
}

<table class="inset">
  <tr>
    <td>Row 1 - Cell 1</td>
    <td>Row 1 - Cell 2</td>
    <td>Row 1 - Cell 3</td>
  </tr>
  <tr>
    <td>Row 2 - Cell 1</td>
    <td>Row 2 - Cell 2</td>
    <td>Row 2 - Cell 3</td>
  </tr>
  <tr>
    <td>Row 3 - Cell 1</td>
    <td>Row 3 - Cell 2</td>
    <td>Row 3 - Cell 3</td>
  </tr>
</table>