Question

我必须在span元素中添加不必要的th才能让margin-top生效。我是否可以使用CSS规则来避免这种额外的span？

CSS

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
}
thead
{
    background-color:gray;
}
th span
{
    display:block;
    margin-top:-4px;
}
th, td
{
    padding:2px;
}

HTML

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

Answer 1

当然，这是你的小提琴： http://jsfiddle.net/VywK7/4/

CSS

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
}
thead
{
    background-color:gray;
}
td
{
    padding:2px;
}
th
{
    padding: 0 2px 5px;
    line-height: 15px;
}

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>

Answer 2

您添加的-4px页边距是由表格边框引起的。因此，尝试删除顶部边框，您不再需要<span> s（和相应的CSS）：

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
    border-top-width: 0px;
}

将余量应用于元素

2 个答案: