tbody上的填充

Question

我正在使用vBulletin为一个主要使用表格来排版的论坛设计样式。如何在tbody上使用内边距将内容与边框分开？

这里有一张我的主站点图片，其中内容被推离边框5像素：

然而，在vBulletin上，在tbody上添加填充并不能将内容推开：

- Jordan Doyle

Answer 1

方法1
您有几种不同的选择：

tbody:before {
  content: '';
  display: block;
  height: 20px;
}

添加这将基本上在结尾之前“插入”内容。这是一种“快速且简单”的解决方案。


方法2
另一个选项是给您的table一个border-collapse: collapse，然后为您的tbody设置边框值：

table {
  border-collapse: collapse;
}
table tbody {
  border-right: 20px solid transparent;
}

不过，这两种方法都有缺点。在IE7中，:before选择器可能无法正常工作，并且需要一个!DOCTYPE才能在IE8中正常工作。第二种方法有时可能会有些棘手，具体取决于你的CSS的其余部分。请确保有!DOCTYPE。

- smts

---

为了IE8的兼容性，您需要使用单冒号。否则，双冒号语法只支持IE9及更高版本。 - BoltClock

在IE9中，这似乎对我不适用高度。它在Chrome和IE11中有效，但在IE9中无效。如果我将内容更改为类似“xyz”的内容，则字符会显示出来，因此样式肯定已应用，但高度仅仅没有放置那么多像素的空间。 - Sterno

在 tbody 中的 tr 上使用伪元素 :first-child :last-child 怎么样？更多信息请参考 https://dev59.com/zHVC5IYBdhLWcg3wcgmd#294925。 - redfox05

Answer 2

在表格中添加一个带有填充单元格的空列和/或行。

向 tbody 添加 :before 内容可能不会产生您期望的效果。它可能不会像您想象的那样推动边框，甚至其他单元格、列或行组。一般情况下，请不要尝试将任何内容放在表格的单元格外部，这会给您带来麻烦。

- Marc M.