低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

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

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を指定しても幅が変わらない場合は、こちらの対処法を試してみてください。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ