【table】widthで指定した幅が反映されない場合の対応方法

【table】widthで指定した幅が反映されない場合の対応方法
末富 将也

前回、jQueryのテクニックでページをスクロールすると、ヘッダーが固定されたり、途中のコンテンツが固定させるテクニックを紹介させていただきましたが、一つ問題が起きたので紹介させていただきます。

テーブルのヘッダーをエクセルのヘッダー固定のように動作させたのですが、裏の作りとしては、テーブルを2つ用意してます。

テーブルA:ヘッダー用のテーブル
テーブルB:各項目用のテーブル

といった作りです。この時、CSSでセルの各幅を調整してるのですが、テーブルAとテーブルBでセル幅がずれるんです・・・(IE11だけ・・・)。
本当に憎むべき、IE・・・。

長年、この仕事をしてますがかな〜り初歩的な話です。恥ずかしい・・・。
でも参考になれば幸いです。では、トミー行きまーす。

テーブルの作例イメージ

テーブルAとテーブルBで擬似的に下記のテーブルをイメージを作ってます。
MacやwindowsでChromeやFirefox、Safariで見ても問題はないです。ただIE11だけ、ずれるんです・・・。

IE11ではずれてる・・・

IE11で確認すると、上記のようにずれることがあります・・・(泣)
※上記は、あくまでイメージで作成しています。

末富 将也
IEには、本当に困りますね・・・・。
でも大丈夫です。CSSにコードを一行足すだけで解決できます!

対応方法

HTML

Sass

ポイント

長々と書きましたが、簡単に言いますと12行目にある「table-layout: fixed;」を追加すると大丈夫です。
ポイントとは、tableとかに指定してある、cssに記述することです。

これでtableの列幅を指定した幅に、正確に対応できます!
tableの諸要素にwidthを指定しても幅が変わらない場合は、こちらの対応を試みてください。

最後まで、閲覧していただきありがとうございました。

【table】widthで指定した幅が反映されない場合の対応方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA