​​と<th>要素の幅には何が影響しますか？

Question

テーブルヘッダーをウィンドウの上部に固定しようとしていますが、何らかの理由で<td>と<th>要素の幅を次のように設定しても、要素の幅は同じになりません（列ヘッダー）他の列のセルと一致していない。ここで

th, td { 
    padding-left: 20px; 
} 

td:first-child, th:first-child { 
    width: 80px; 
} 

td:nth-child(2), th:nth-child(2) { 
    width: 200px; 
} 

td:last-child, th:last-child { 
    width: 320px; 
    padding-right: 20px; 
} 

はこれを示しjsfiddle例です：それを使って実験した後http://jsfiddle.net/zgaPw/1/

を、私は、font-sizeプロパティは<td>の幅に影響を与えるように見えることがわかりましたしかし、私はそれを訂正する理由や方法についてはわかりません。

誰かが何が間違っているのか、それを修正する方法についていくつかの光を当てることができますか？ありがとう！

Answer 1

セルの幅は、兄弟（他のセル）と親（<table>）の影響を受けます。セルが同じ幅を持って取得するには、に等しいセルのwidthプロパティ定義：<th>要素を含むあなたの最初の行で

For each cell: 
    width + padding left + padding right 
= 660px; 

を、あなたが原因600PXの幅を、定義されています頭が少し収縮する。これを修正するには、行のwidthプロパティを削除するか、width:660px;を定義します。

フィドル：http://jsfiddle.net/zgaPw/4/