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>

でテーブルを表示すると

セル1-1 セル1-2だぁぁぁぁぁ セル1-3だ
セル2-1 セル2-2 セル2-3
セル3-1 セル3-2 セル3-3

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

<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)で
表示すると

セル1-1 セル1-2だぁぁぁぁぁ セル1-3だ
セル2-1 セル2-2 セル2-3
セル3-1 セル3-2 セル3-3

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

タイトルとURLをコピーしました