从外部表格边界线填充

Posted 2023-03-05

【中文标题】从外部表格边界线填充

【英文标题】：Padding from outside table border line

【发布时间】：2014-03-31 01:44:21

【问题描述】：

快速提问。我有一张桌子，它有一个边框。当我添加填充时，它会从表格的内部添加填充。有什么办法让它从边界外添加填充？

基本上，表格边框线应在其单元格内。

【问题讨论】：

我不确定您所说的 在其单元格内 是什么意思，但您是否尝试过使用 margin 而不是 padding？

是的，很遗憾，它会移动整个桌子。

【参考方案1】：

如果我理解正确，那么你应该使用边距而不是填充。

【讨论】：

我不认为这是他们的意思。

【参考方案2】：

我不是 100% 确定你的意思，但你可能想要这个。

html：

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

CSS：

body 
    padding: 20px;

table 
    width: 400px;
    height: 400px;
    outline:2px solid red;
    outline-offset: -15px;

td 
    border:2px solid blue;

仅限表格：

DEMO HERE

仅限单元格：

DEMO HERE

所以我们在这里设置了一个outline，你可以在上面加上一个outline-offset。因此，如果您使用 - 值，这会将其放入表中。将其用作边框，但请记住它不计入宽度或高度。

注意：您可以在每个单元格等上使用它。

【讨论】：

效果很好！只需为内容添加边距。

这正是我想要的。谢谢大家。

@3sm 好东西，很高兴我能帮上忙。

请注意，这在 Internet Explorer 11 中失败。

对不起，我忘了说，这是使用 CSS3。