table内のtd,thに対してcssできちんと幅指定をしているはずなのに、効かないことがあります。本件、遭遇する度にイヤ気がさす自分がいるので、今回はきちんと忘備録に残しておくことにしました。
自分の場合、以下のようにヘッダ行を2行にしている場合などにwidthが効かない現象に遭遇しているような気がします。
htmlの記述
<table class="sample"> <tr> <th width="350px" colspan="2">大ヘッダ</th> </tr> <tr> <th width="150px">子ヘッダ1</th> <th width="200px">子ヘッダ2</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内で子ヘッダ1と子ヘッダ2が均等の幅で分割されてしまいますが、これを記述することできちんと指定した幅に分割されます。
- 作者: 益子貴寛,堀内敬子,小林信次,千貫りこ,伊藤学,山田あかね,西畑一馬,CSS Nite
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2008/11/11
- メディア: 単行本(ソフトカバー)
- 購入: 64人 クリック: 661回
- この商品を含むブログ (63件) を見る
- 作者: MdN編集部
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2012/03/21
- メディア: 単行本
- クリック: 14回
- この商品を含むブログを見る
CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)
- 作者: エ・ビスコム・テック・ラボ
- 出版社/メーカー: マイナビ
- 発売日: 2013/05/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る