css - th と td の幅が異なります

Question

テーブルヘッダーを静的にしようとしていますが、これを行うたびに th と td の幅が変化してしまいます。私はCSSを使用してこれらすべてを行っています。テーブル ヘッダーを静的にする方法は、その位置を固定することです。

th と td の幅を同じに設定しようとしましたが、うまくいきません。

#idOfHeader th { width: 20px; }
#idOfBody td { width: 20px; }

Answer 1

min-widthなぜ、、max-widthまたはを使用する必要があるのか​​わかりません<col>。幅が異なる原因として考えられるのは、セルの幅を希望よりも広くするコンテンツがどこかにあるか、tdsとthsのパディングが異なることです。セルの全幅は、その幅にパディングを加えたものです。

thパディングがどこかに指定されていない限り、ブラウザのデフォルトのパディングが適用され、のパディングは、のパディングよりも大きくなる可能性が高いと思います。td

Answer 2

th,td{

width:20px;
max-width:20px;
min-width:20px;
}

多分あなたpaddingはそのような違いを生む

Answer 3

HTMLでcolタグを使用する

<table border="1" width="100%">
  <col width="100">
  <col width="50">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

フィドル