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属性？

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>

表格边框底边的间距

3 个答案: