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