tableでwidthを指定しても幅が固定されない場合の対処法

2010年10月26日

tableの諸要素（thやtdなど）の幅をwidthで指定した際、IEなどで表示すると、上手く幅指定が出来ていない場合があります。そういった場合の対処法についてご紹介します。

HTML

01<table class="sampleTable">
02  <tr>
03    <th width="150">サンプルテキスト</th>
04    <td width="200">サンプルテキストサンプルテキスト</td>
05    <td>サンプルテキスト</td>
06  </tr>
07  <tr>
08    <th>サンプルテキスト</th>
09    <td>サンプルテキストサンプルテキスト</td>
10    <td>サンプルテキスト</td>
11  </tr>
12</table>

CSS

01.sampleTable {

								02
								    border-collapse: collapse;
							
								03
								    table-layout: fixed;
							
								04
								}
							
								05
								.sampleTable th,
							
								06
								.sampleTable td {
							
								07
								    border: 1px solid #CCCCCC;
							
								08
								    padding: 5px 10px;
							
							09
							    text-align: left;
						
10}
11.sampleTable th {
12    background-color: #FFFFFF;
13}

サンプルページ

上記のソースのように、table-layoutプロパティにfixedを指定することで、tableの列幅を固定レイアウト化し、幅を自由に設定することが出来ます。fixedを指定してセルごとの幅を指定しない場合には、全体の横幅からそれぞれ均等に、セルへと幅が振り分けられることになります。

もしtableの諸要素にwidthを指定しても幅が変わらない場合は、こちらの対処法を試してみてください。