表格边框底部的间距

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>

​

Answer 2

如果你的底部边框在你的<table>标签之外，你可以将它包装在一个div中，显示为flex，居中对齐，然后给它一个80%的宽度。我想这会满足你的要求。如果这不起作用，你有没有尝试过仅仅使用边距属性？

例如，margin-left: 10%;。

如果不了解更多的html/css以及如何实现边框，就很难给你更多的指导。

Answer 3

这个解决方案怎么样？它只是CSS。

​

table {
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

td {
  border: 1px solid grey;
  padding: 10px;
}

table:after {
  content: '';
  position: absolute;
  width: 80%;
  bottom: -10px;
  left: 10%;
  border-bottom: 2px solid red;
}

<table>
  <tr>
    <td>Apple</td>
    <td>Banana</td>
    <td>Carrot</td>
  </tr>
</table>

​