Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

table-layout

table要素の各セルの幅の表示方法を指定します。『table-layout』プロパティはteble要素、もしくは『display: table』となっている要素に反映させることができます。

サンプルコード
table.test { table-layout: auto;}
table.test1 { table-layout: fixed;}
指定可能な値一覧
概要
autotable要素の各セルの幅を内容に応じて自動で決定します。この『auto』が初期値です。
fixedtable要素の各セルの幅を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』と指定したりして調整すると良いでしょう。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。