为表头添加边距

Question

在this page上我想在“之前”和“表格之后”之间添加一个白色间隙，这与每列中照片之间的差距一致

我已尝试设置“之前”标题的width，max-width和margin-right属性，并尝试设置“之后”标题的margin-left，但这些似乎都不起作用。

谢谢， 唐

Answer 1

最简单的方法是使用colgroup并设置边框作为边距。

<table>
    <colgroup />
    <colgroup style="border-left:5px solid #fff;" />

另请参阅：http://jsfiddle.net/gwYaQ/

我承认表格最简单，但它不是真正的表格数据。 你滥用表格布局= P

有关colgroup的信息：http://www.w3schools.com/tags/tag_colgroup.asp

Answer 2

有一种相当肮脏的方式，但做的工作是：

<tr>
    <th>Before</th>
    <th style="width: 10px; background: none;">&nbsp;</th>
    <th>After</th>
</tr>
<tr>
    <td>IMG1</td>
    <td>&nbps;</td>
    <td>IMG2</td>
</tr>

Answer 3

我认为你不能简单地改变你的CSS。

照片之间的白色间隙是由于表格单元格填充右侧（10px），因此它位于单元格的“内部”。

标题中的渐变是标题单元格的背景，它们之间的空白区域必须是“ouside”。

在修复此问题的方法是在2列之间添加10px宽的列​​。另一种是使用colgroup。

但BGerrissen是对的：你不应该使用它。