Применение поля к элементам th

Question

Я должен добавить ненужные span в мои th элементы, чтобы заставить margin-top работать. Есть ли правило CSS, которое я могу использовать, чтобы избежать этого дополнительного 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>

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;
}