問題
テーブルのセルの幅を均等にするには？
解決策
大元のテーブルに「table-layout: fixed;」を設定する。
内容に限らず同じ幅にしたい。
テーブルのセルの幅は、それぞれ内容に応じた幅になります。
ですが場合によっては内容に限らず同じ幅にしたい場合があると思います。
そんな時のために今回はテーブルのセルの幅を均等にする方法をご紹介します。
DEMOはこちら
| 項目 | 項目 | 項目 | 項目 |
|---|---|---|---|
| 内容 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。 | 内容 | 内容が入ります。 |
| 内容 | 内容が入ります。 | 内容 | 内容が入ります。 |
HTMLはこちら
<table class="tablefixed">
<thead>
<tr>
<th scope="col">項目</th>
<th scope="col">項目</th>
<th scope="col">項目</th>
<th scope="col">項目</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容が入ります。内容が入ります。内容が入ります。内容が入ります。</td>
<td>内容</td>
<td>内容が入ります。</td>
</tr>
<tr>
<td>内容</td>
<td>内容が入ります。</td>
<td>内容</td>
<td>内容が入ります。</td>
</tr>
</tbody>
</table>CSSはこちら
テーブルに対し、「table-layout: fixed;」と設定することで、セルの幅が均等になります。
table.tablefixed{
width: 100%;
table-layout: fixed;
}
コメント