表格边框底边的间距

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>