[TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう | デザインってオモシロイ -MdN Design Interactive-

[TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう

2024.4.24 WED

【サイトリニューアル!】新サイトはこちらMdNについて

日々のデザイン現場で発生する問題・難題を解決します!

WEB制作トラブル速戦即決術! 第9回


[TROUBLE 49]
webトラブル
テーブルのセル幅が意図しない
数値に変わってしまう

文=素利 敦((株)アイ・エム・ジェイ)

A. セル幅をパーセンテージ値で指定する

セル幅をpx単位で固定したつもりなのに、環境によってはセル幅が変わってしまう。これはテーブルのセル幅が内容量の影響を受けて決められるためだ。そのような場合はセル幅をパーセンテージ値(%)で指定すると内容量に左右されにくい表にできる。


HTML側で、割合を指定したい<th />に対して別名のclassを指定する。3行以上の場合も同様にそれぞれに対して指定
HTML側で、割合を指定したい<th>に対して別名のclassを指定する。3行以上の場合も同様にそれぞれに対して指定

パーセンテージ値(%)で指定することで、セル幅をコントロールする
パーセンテージ値(%)で指定することで、セル幅をコントロールする

[INDEX]
>>> [TROUBLE 44] IE 6でフロート方向のマージンが広がってしまう
>>> [TROUBLE 45] Safariとほかのブラウザで色味がまったく変わってしまった
>>> [TROUBLE 46] IE 5やIE 6の環境でAjaxがうまく通信してくれない
>>> [TROUBLE 47] classやidの名前を適当につけていたら混乱してしまった
>>> [TROUBLE 48] Webページの内容が表示されず真っ白になってしまう
>>> [TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう



『web creators』の情報はこちら!>>>

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在