table-layout

table.test { table-layout: auto;}
table.test1 { table-layout: fixed;}

<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>

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』と指定したりして調整すると良いでしょう。