对元素应用边距 [英] Applying margin to th elements

问题描述

我必须在我的th元素中添加一个不必要的span才能使margin-top正常工作.是否有CSS规则可以用来避免这种额外的span?

I have to add an unnecessary span in my th elements in order to get the margin-top to work. Is there a CSS rule I can use to avoid this extra span?

http://jsfiddle.net/VywK7/1/

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>

推荐答案

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

Sure, here is your fiddle: 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>

这篇关于对元素应用边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！