将margin应用于第th个元素

Question

为了使margin-top正常工作，我必须在我的th元素中添加不必要的span。有没有我可以用来避免这个额外的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; 
}