[HTML] 今更ながらTableタグのサイズが思ったとおりにならない時にどうすればいいか問題

ビジネスサイドって、どうしてあんなにエクセルが大好きなんでしょう？ 企画書を書く時、何かの資料を作る時、メモ書きをする時・・・様々な用途でエクセルばかりを使う人の事は何て呼ばれるんでしょう？ 調べても呼び名が無いので、自分が考えておくことにします。 PHPならペチパーと言われているように、エクセル大好きでなんでもエクセルで書類を作ってしまう人の事は、今後エクセラーとでも呼ぼうかな？ 別にじぶんは　、エクセルが嫌いというわけではないんですが、システム構築の基本UIがエクセルになってしまう開発をやっていると、もっと別のUIアプローチがあるのにな〜といつも考えてしまいます。 そして、こういう人がクライアントにいた場合、システムの表示形式はほぼTableタグで構成することになります。 最近CSSが発達してきているお陰で、ほぼtableタグなんて書かないんですが、めちゃくちゃ最近テーブルを書いています。 そして、久しぶりにtableのサイズが言うことを効かない問題に直面して、その対応方法などをブログにメモって起きます。 あ、ちなみに、自分はブロガーって事になりますね。

Tableタグのサイズ問題

画面内に収まる程度の大きさのtableタグであれば、何の問題もないんですが、幅が表示領域を大幅にオーバーしている場合（特に横幅）に、Tableタグは思ったとおりに言うことを聞いてくれなくなります。 下記のサンプルソースを使って説明をしていきます。

あいうえおかきくけこさしすせそたちつてとなにぬねの

アイウエオカキクケコサシスセソタチツテトナニヌケノ

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

<table> <tr> <td>あいうえおかきくけこさしすせそたちつてとなにぬねの</td> <td>アイウエオカキクケコサシスセソタチツテトナニヌケノ</td> <td>abcdefghijklmnopqrstuvwxyz</td> <td>ABCDEFGHIJKLMNOPQRSTUVWXYZ</td> <td>1234567890</td> </tr> </table>

セルの内容でサイズが変更されてしまう

上記サンプル表示のように、書かれている内容によって、ブラウザ側で良い感じにサイズを決めてくれているようですが、余計なお世話です。 これを解消したければ、table-layout + widthを記述すると、全体サイズ&セルが等幅になります。 table{ table-layout:fixed; width:500px; }

あいうえおかきくけこさしすせそたちつてとなにぬねの

アイウエオカキクケコサシスセソタチツテトナニヌケノ

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

この設定のデメリットは、１つのセルだけをサイズを変更したい場合などの対応ができません。 あくまで全てのサイズが同じになるという設定です。 あと、全体サイズを記載しないといけないので、innerスクロールなどの場合は、使いづらいかもしれません。

セルサイズを指定しても言うことを効かない

セルの特定の箇所のみを固定サイズにしたい場合に、幅がオーバーしているtable表示では、全く指定通りになりません。 次のサンプルでは、1番目に"width:100px;"をセットしているんですが、まるで言うことをきいてくれません。 これを解消したければ、セル内にそのサイズのタグを設置する以外にありません。 # before <td style='width:100px;'>1</td> # after <td><div style='width:100px;'>1</div></td> ローテクすぎて笑えてきますよね。 tdのpaddingなどを0にして、サイズ調整用タグに適用することで、見た目は違和感が無くなるでしょう。 ちなみに、tableタグのセル情報の内容をoverflow:scrollさせることはできないので、その場合もこの方式ではみ出しを非表示にしたり、個別スクロールさせることができます。 UI的に望ましいのは、...（三点リーダー）などで表示しきれなかった表示をするなどできると良いですね。

いっそのこと、display:gridで書く

もはやテーブルタグを使わずに、display:gridでの表示に切り替えるのもいいでしょう。 <div id="grid"> <div>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> <div>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> <div>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> <div>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> <div>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> </div> <style> #grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; } #grid > *{ border:1px solid #87c9b3; padding:10px; } </style> これであれば、ネスト（階層）も少なくなるし、個別のセルには、そこまでの束縛ルールはありません。 ただし、grid-template-columnsで横に並ぶセル数を指定しないとイケないのが、汎用性に欠けるかもしれません。

display:flexで書くパターン

<div id="flex"> <div class='row'> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> </div> <div class='row'> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> <div>□□□□□□□□□□</div> </div> </div> <style> #flex{ display:flex; flex-direction:column; gap:0; } #flex .row{ display:flex; gap:0; } #flex .row > *{ flex:1; border:1px solid #87c9b3; padding:10px; } </style> displayのgrid,flexを使う時の難点は、セルのボーダーラインの書き方です。 隣と合わせて2本の線になってしまうのを回避しなければいけません。

あとがき

今回のブログ記事を書いてみたところ、flexパターンが一番調整しやすいと感じてしまいました。 もはやtableタグもオワコンなのだろうか？ class='table'なんていう独自のDOMセットのcssを作っておくのも悪くないかもしれませんね。