[css] Tableタグのセル幅を均等にしたい場合は、「table-layout:fixed」を使う

システム開発屋にとって、独自の「予約管理システム」を作っておくことが、非常に重要と、今更ながら気がついた、ユゲタです。

本日のIT謎掛け

「tableタグ」とかけまして・・・ 「日本一の観光地」とときます。 そのココロは・・・ 碁盤の目になっているのが特徴的です。（tableの格子状態と、京都の町並み）

tableタグの意外と知らないtable-layout属性

今回、予約管理システムを開発している中、カレンダー表示が重要なため、デザインにも気を使いつつ進めていたのですが、tableタグで構成されている、各日付内の情報によって、tableセルのサイズがバラバラになる状態が発生しました。 こんな感じです。 カレンダーとして見ると、非常に見苦しい状態です・・・ 最初は、cssでサイズ調整をすればいいかと思っていたんですが、tdタグをpx指定すれば、確かに問題なく固定化できるのですが、 レスポンシブかつ、ブラウザウィンドウのサイズに伴って幅を変えたいために、tableの各セルには、"width:cals(100% / 7);"をセットして、それぞれの曜日を、同じサイズにしようとしたところ、 これが全く機能せず・・・ どうやら、tableタグには独自のサイズ調整機能が備わっているようなので、div構成にするか悩んだのですが、 こうした時の為に、"table-layout:fixed;"というモードが存在する事を、恥ずかしながら、初めて知りました。

table-layoutの実力

tableタグにセットするだけで、以下のような見栄えになりました。 全く問題ないですね。 calc設定を外しても、この状態をキープしてくれます。 "table-layout"というのは、tableタグの内部を均等に固定表示してくれる機能なのだそうです。 参考 : http://www.htmq.com/style/table-layout.shtml

対応ブラウザバージョンについての調査

ビックリすることに、この機能、IE6時代から使えた機能だったのだそうです。 どのブラウザも、ほぼ過去バージョンから問題なく使用でき、これまでこの機能を知らなかった自分がとても恥ずかしく感じ始めました。 まるで裸の王様でしたね・・・orz 同じ事象でお困りの方の何かしらの足しになれば、幸いです。

余談

ちなみに、tableセルの中の要素は、サイズがセル幅をオーバーした際に、便利に文字をカットしてくれるように、以下のスタイルを適用しています。 .table-cell-inner-object{ width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } これにより、サイズを超えて、文字表示が削り取られる時に、「...」というマークを文字後ろにつけてくれるようになります。 この機能も、firefoxの初期バージョン以外のブラウザでは、問題なく使用できるので（IE6でも使える！）、合わせておすすめしておきます。