HTMLでテーブルを作成する際、CSSでwidthプロパティを指定しても、テーブルの中に多くのテキストが含まれると<td>の幅が変わってしまうことがあります。
この問題に対処するためには、table-layoutプロパティを使用することができます。
この記事では、HTMLのテーブルで幅指定時に生じる問題の解決方法を紹介して行きます。
table-layoutプロパティとは
table-layoutプロパティは、HTMLのテーブルで表のレイアウト方法を指定するためのCSSプロパティです。
このプロパティを使うことで、表のレイアウト方法を自動調整から固定幅にすることができます。
table-layoutプロパティの使用方法
table-layoutプロパティには、autoとfixedの2つの値があります。
初期値はautoで、テーブルの幅とセルの内容に合わせて列幅を自動的に調整します。
fixedを指定すると、列幅が指定した幅に固定されて表示されます。
table-layoutプロパティ
表組みのレイアウト方法を指定する事が出来ます。
| 初期値 | auto |
|---|---|
| 継承 | なし |
| 適用される要素 | テーブルまたはインラインテーブル要素 |
| モジュール | CSS3 Tables Module |
値の指定方法
| auto | 列幅は表組みの幅とセルの内容に合わせて自動的に調整されます。 |
|---|---|
| fixed | 列幅はwidthプロパティで指定した値で固定されて表示されます。 指定がない列の列幅は、表組みの残りの幅に合わせて均等に分割されます。 |
幅指定の例
コード
テーブルの幅を100%に指定し、td-aに20%、td-bに80%の幅を指定する場合、最初はtable-layoutプロパティを指定していません。
この場合、中身の文字が多いとtdの幅が変わってしまいます。
CSS
table.sample{
width: 100%;
}
.td-a{
width: 20%;
}
td-b{
width: 80%;
}HTML
<table class=”sample”> HTML
<tr>
<td class=”td-a”>aaaa</td>
</tr>
<tr>
<td class=”td-b”>bbbb</td>
</tr>
table-layoutプロパティの追加
これを解決するために、table-layoutプロパティを追加します。
固定レイアウト化するために、table-layoutプロパティにfixedを指定します。
CSS
table.sample{
width: 100%;
table-layout: fixed;
}
.td-a{
width: 20%;
}
.td-b{
width: 80%;
}まとめ
table-layoutプロパティにfixedを指定することで、HTMLのテーブルの列幅を固定レイアウト化し、幅を自由に設定することができます。
セルごとに幅を指定しない場合には、全体の横幅からそれぞれ均等に、セルへと幅が振り分けられます。
プログラミング中、誰かへ相談したいことはありませんか？
プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。
そんな悩みを解決できるのがオンラインプログラミング学習サービス（侍エンジニア）です。
月額2,980円から学べて、現役エンジニアとオンラインで相談できるほか、
回答率100%のQA掲示版でプログラミングに関する悩みを解決します！
公式サイトからご入会いただくと、お得な割引クーポンを利用できるので、気になる方はぜひ詳細をご覧ください。
