TABLEタグでセルサイズを同じにする

TABLEタグのセルのサイズをどのセルも同じ幅にする方法です。

TABLEタグでセルサイズを同じに

TABLEタグのセルのサイズをどのセルも同じ幅にしたい場合があります。

CSSのtable-layoutを設定する

テーブルのセルサイズをすべて同じにするにはCSSのtable-layoutプロパティはテーブル（表）の列幅を自動レイアウト（auto）か、固定レイアウト（均等割り付け）（fixed）に設定します。
（規定値は自動レイアウト（auto）です。）

自動レイアウト（auto）はセル内容に合わせて各列の幅を決定して表示します。

<table border="1" class="table_blue_stripe" style="table-layout:auto;" width="100%" >
<tr>
    <td title="セル1-1">セル1-1</td>
    <td title="セル1-2">セル1-2だぁぁぁぁぁ</td>
    <td title="セル1-3">セル1-3だ</td>
</tr>
<tr>
    <td title="セル2-1">セル2-1</td>
    <td title="セル2-2">セル2-2</td>
    <td title="セル2-3">セル2-3</td>
</tr>
<tr>
    <td title="セル3-1">セル3-1</td>
    <td title="セル3-2">セル3-2</td>
    <td title="セル3-3">セル3-3</td>
</tr>
</table>

でテーブルを表示すると

のようにセル幅は文字数に合わせて変化しますが、

<table border="1" class="table_blue_stripe" style="table-layout:fixed;" width="100%">
<tr>
    <td title="セル1-1">セル1-1</td>
    <td title="セル1-2">セル1-2だぁぁぁぁぁ</td>
    <td title="セル1-3">セル1-3だ</td>
</tr>
<tr>
    <td title="セル2-1">セル2-1</td>
    <td title="セル2-2">セル2-2</td>
    <td title="セル2-3">セル2-3</td>
</tr>
<tr>
    <td title="セル3-1">セル3-1</td>
    <td title="セル3-2">セル3-2</td>
    <td title="セル3-3">セル3-3</td>
</tr>
</table>

のように固定レイアウト（均等割り付け）（fixed）で
表示すると

テーブル全体の幅で均等割り付けされて表示されます。