宗教上家系ラー食

宗教上の都合家系ラーメン食べます。

仕事関係のIT情報(ソフト、ハート、ガジェット、周辺機器)から趣味の写真、株、バイク等幅広く何でも書いていく備忘録的ブログです。

MENU

【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を指定してセルごとの幅を指定しない場合には、全体の横幅からそれぞれ均等に、セルへと幅が振り分けられることになります。

aoikugayama.hatenablog.com

aoikugayama.hatenablog.com

aoikugayama.hatenablog.com

 

にほんブログ村 IT技術ブログ IT技術メモへ

にほんブログ村 ライフスタイルブログ ライフスタイル情報へ

よかったらブログの登録で応援よろしくお願いします❗

このブロク《宗教上の都合家系ラーメン食べます

ぜひお願いします⇛

もう一つ運営してます。《くがやまあおいのお薬出しておきますね。

こちらもぜひ⇛