IEでtd,thの幅指定（width）が効かないときにするべきこと

table内のtd,thに対してcssできちんと幅指定をしているはずなのに、効かないことがあります。本件、遭遇する度にイヤ気がさす自分がいるので、今回はきちんと忘備録に残しておくことにしました。

自分の場合、以下のようにヘッダ行を２行にしている場合などにwidthが効かない現象に遭遇しているような気がします。

htmlの記述

<table class="sample">
<tr>
  <th width="350px" colspan="2">大ヘッダ</th>
</tr>
<tr>
  <th width="150px">子ヘッダ１</th>
  <th width="200px">子ヘッダ２</th>
</tr>
<tr>
  <?php foreach{$dbh->query($sql) as $rows}:?>
  <td><?php echo $rows['staff_id']; ?></td>
  <td><?php echo $rows['staff_name']; ?></td>
  <?php endforeach;?>
</tr>
</table>

cssの記述例

.sample {
  /* 略 */
}

.sample th{

  /* 略 */
  table-layout: fixed;
}

teble-layout:fixed;を記述しなかったら場合、親ヘッダ350px内で子ヘッダ１と子ヘッダ２が均等の幅で分割されてしまいますが、これを記述することできちんと指定した幅に分割されます。

あわせて読みたい

非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた - TechNote

エンジニアにとって、webサービスや社内webシステムを作るときに毎回苦労するのが「デザイン」ですが、最近はBootstrapやBootMetro、Pureなど...

Webサイトを作るときに知っておくとかなり便利なサイト横幅の決め方 - TechNote

Webサイトの設計を始めるとき、サイトの横幅を何pxにするかが重要な問題となる。サイト幅を決定するときの判断材料はおおむね以下のようなところだろう。昨今普及して...

BootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件 - TechNote

しばらくニュースをチェックできずにいて何気なくFontAwesomeのサイトを覗いてみたら、FontAw...

現場のプロから学ぶXHTML+CSS

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)