html - 向第一个元素添加边距

Question

我有一个表格，我想为元素添加边距，这样我就可以有一个不填充整个表格列的底部边框，并且元素不受影响。另一种看待这个问题的方法是使用 with border-collapse: separate 和 with border-collapse: collapse 不幸的是它不起作用。

我考虑过使用两张表，一张用于标题，一张用于正文。还从表格单元格以外的其他内容更改第 th 元素的第 th 显示。两者都很讨厌，所以我正在寻找比存在更好的解决方案。

这是一个jsFiddle，它有一个带有一些 css 的表格，如果你想快速解决这个问题。

下面是一些代码，主要来自我在 jsFiddle 上的尝试，试图让它做我想做的事情。

HTML

<table>
  <thead>
    <tr>
        <th>Month</th>
        <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>​

CSS

table
{
    width:100%;
    padding:2px;
    border-collapse: collapse;
}
td
{
    padding:2px;
}
th
{
    border-bottom:2px solid gray;
    padding: 0 2px 5px;
    line-height: 15px;
    margin: 0 10px 0 0;
}

编辑：希望这将说明我正在努力实现的目标

---------------------------------------------
|Month     |Amount     |Month     |Amount      | <--TH element
|--------   ---------   --------   ---------   | <--bottom border doesn't fill cell
|----------------------------------------------|
|Jan       |$100       |Jan       |$100        |
|----------------------------------------------|
|Feb       |$200       |Feb       |$200        |
|----------------------------------------------|

Answer 1

如果我理解你，这就像你想要的：

http://jsfiddle.net/VywK7/21/

th {
    background-color: yellow;
}
th {
    border-top: 4px solid gray;
    border-bottom: 4px solid gray;
}
th:first-child {
    border-left: 4px solid gray;
}
th + th + th + th, /* choose one of these selectors */
th:last-child {
    border-right: 4px solid gray;
}

伪元素乐趣： ​http://jsfiddle.net/VywK7/23/

th:after {
    content: ' ';
    display:block;
    width: 50%;
    background: red;
    height: 4px;
    margin-bottom: 4px;
}

Answer 2

您需要将边距添加到td和/或th元素中，恐怕因为trs 不会接受它。