【CSS】Tableで指定したWidthで固定されない現象を解決したTips
移転しました。
HTMLでテーブルを作成する時に、CSSでWidthを指定していても中身の文字が多い時
＜td＞の幅が変わってしまう事があった。
結論から言うと、tableにtable-layoutプロパティを指定することで解決した。
table-layoutプロパティ
表組みのレイアウト方法を指定する事が出来る。
| 初期値 | auto |
|---|---|
| 継承 | なし |
| 適用される要素 | テーブルまたはインラインテーブル要素 |
| モジュール | CSS3 Tables Module |
値の指定方法
| auto | 列幅は表組みの幅とセルの内容に合わせて自動的に調整されます。 |
|---|---|
| fixed | 列幅はwidthプロパティで指定した値で固定されて表示されます。指定がない列の列幅は、表組みの残りの幅に合わせて均等に分割されます。 |
コード
初めは下記のようにしていたが、中身の文字が多いと枠が広がってしまっていた。
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: fixed; を追加することで、見事固定された。
追加したCSSは下記のだ。
table.sample{width: 100%;table-layout: fixed;}.td-a{width: 20%;}td-b{width: 80%;}
まとめ
table-layoutプロパティにfixedを指定することで、tableの列幅を固定レイアウト化し、幅を自由に設定することが出来ます。
fixedを指定してセルごとの幅を指定しない場合には、全体の横幅からそれぞれ均等に、セルへと幅が振り分けられることになります。
よかったらブログの登録で応援よろしくお願いします❗
このブロク《宗教上の都合家系ラーメン食べます》
ぜひお願いします⇛
もう一つ運営してます。《くがやまあおいのお薬出しておきますね。》
こちらもぜひ⇛
