Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- table-layout
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
table-layout
table要素の各セルの幅の表示方法を指定します。『table-layout』プロパティはteble要素、もしくは『display: table』となっている要素に反映させることができます。
サンプルコード
table.test { table-layout: auto;} table.test1 { table-layout: fixed;}
指定可能な値一覧
値 | 概要 |
---|---|
auto | table要素の各セルの幅を内容に応じて自動で決定します。この『auto』が初期値です。 |
fixed | table要素の各セルの幅をcol要素、もしくは最初の行の各セルの幅によって決定し、2行目以降のセルはその大きさを引き継ぎます。最初の行の各セルに幅の指定がなかった場合はtable要素に対する均等な幅でレンダリングされます。この『fixed』を反映させたい場合は『width』プロパティも同時に指定する必要がありますのでご注意下さい。 |
ブラウザでの表示結果
<table style="table-layout: auto; width: 500px;"> <tr><th style="border: solid 1px black;">th要素1</th><th style="border: solid 1px black;">th要素2。テキスト。テキスト。</th></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。テキスト。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。テキスト。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。テキスト。テキスト。テキスト。</td></tr> </table>
<table style="table-layout: fixed; width: 500px;"> <tr><th style="border: solid 1px black;">th要素1</th><th style="border: solid 1px black;">th要素2。テキスト。テキスト。</th></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。テキスト。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。テキスト。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。テキスト。テキスト。テキスト。</td></tr> </table>
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
概要
table要素の各セルの幅の表示方法を指定します。『table-layout』プロパティはteble要素、もしくは『display: table』となっている要素に反映させることができます。
値に『auto』と指定した場合は各セルの内容に合わせて幅を自動決定します。
値に『fixed』と指定した場合はtable要素の各セルの幅をcol要素、もしくは最初の行の各セルの幅によって決定します。その場合は『width』プロパティも同時に指定する必要がありますのでご注意下さい。
値に『fixed』と指定した場合のレンダリングについてですが、col要素、もしくは最初の行の各セルに横幅が指定されていない場合は均等な幅でレンダリングされ、2行目以降は1行目で決定された幅をそのまま引き継ぎます。
<p>以下は『table-layout: <span style="color: #f00">fixed</span>』のサンプルです。table要素の大きさは500pxと指定しています。</p> <table style="table-layout: fixed; width: 500px;"> <tr><th style="border: solid 1px black;">ここはth要素です。幅の指定なしなので均等な幅になります。</th><th style="border: solid 1px black;">ここはth要素です。幅の指定なしなので均等な幅になります。</th></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。</td><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。テキスト。</td><td style="border: solid 1px black;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。テキスト。テキスト。</td></tr> </table>
col要素、もしくは最初の行の各セルに横幅が指定してある場合はその大きさでレンダリングされ、2行目以降は1行目で指定されている幅をそのまま引き継ぎます。
<p>以下は『table-layout: <span style="color: #f00">fixed</span>』のサンプルです。table要素の大きさは500pxと指定しています。</p> <table style="table-layout: fixed; box-sizing: border-box; width: 500px;"> <tr><th style="border: solid 1px black; box-sizing: border-box; width: 200px;">ここはth要素です。横幅は200pxと指定しています。</th><th style="border: solid 1px black; box-sizing: border-box; width: 300px;">ここはth要素です。横幅は300pxと指定しています。</th></tr> <tr><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。</td><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。</td></tr> <tr><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。</td><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。</td></tr> <tr><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。テキスト。</td><td style="border: solid 1px black; box-sizing: border-box;">ここはtd要素です。1行目で決定された幅を引き継ぎます。テキスト。テキスト。テキスト。</td></tr> </table>
尚、table要素の各セルが意図した大きさにならない、『width』プロパティが効かない、といった場合はtable要素の大きさと各セルの大きさが一致しているかどうか確認するようにしてください。『table-layout』プロパティの値に関係なく、table要素の大きさと各セルで指定した大きさが一致していない場合は指定した大きさになりません。
<p>以下のtable要素の大きさは500pxと指定しています。</p> <table style="box-sizing: border-box; width: 500px;"> <tr><th style="border: solid 1px black; width: 100px;">ここはth要素です。横幅は100pxと指定していますがtable要素と大きさが一致していないため指定した横幅より大きくなります。</th><th style="border: solid 1px black; width: 200px;">ここはth要素です。横幅は200pxと指定していますがtable要素と大きさが一致していないため指定した横幅より大きくなります。</th></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> </table>
<p>以下のtable要素の大きさは500pxと指定しています。</p> <table style="box-sizing: border-box; width: 500px;"> <tr><th style="border: solid 1px black; width: 400px;">ここはth要素です。横幅は400pxと指定していますがtable要素と大きさが一致していないため指定した横幅より小さくなります。</th><th style="border: solid 1px black; width: 600px;">ここはth要素です。横幅は600pxと指定していますがtable要素と大きさが一致していないため指定した横幅より小さくなります。</th></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> <tr><td style="border: solid 1px black;">ここはtd要素です。</td><td style="border: solid 1px black;">ここはtd要素です。</td></tr> </table>
デフォルトの状態では境界線(ボーダー)の太さやパディングなども横幅として含まれてしまうため、各セルをきっちりと『width』プロパティで指定した大きさでレンダリングさせたい場合は『box-sizing』プロパティの値を『border-box』と指定したり、『border-collapse』プロパティを『collapse』と指定したりして調整すると良いでしょう。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円