HTML ページ適応幅テーブル

WEB アプリケーションのページでは、テーブルがよく使用されます。列の数が限られているため、各列のコンテンツをさまざまな解像度の画面に適応させる方法は、比較的簡単に遭遇できる問題です。ここでは、この種の問題に対する私の解決策と見解について説明します。 すべての列を固定幅に設定すると、明らかにこのような要件を満たすことはできませんが、すべての列をパーセンテージに設定すると、特定のサイズや解像度で見苦しくなるのではないかと心配しています。私は、テーブル内の列数がそれほど多くないと仮定して、列の幅のほとんどを固定値に設定し、1 つの列は幅を設定せずに残し、テーブルの幅を画面のパーセンテージ (95%、98% など) に設定するという、次の方法で処理することに慣れています。

例：

<テーブルの幅="95%" 境界線="1" セルパディング="2" セル間隔="1">
  <tr>
    <td width="50px" nowrap>シリアル番号</td>
    <td width="150px" nowrap>カテゴリーA</td>
    <td width="150px" nowrap>カテゴリーB</td>
    <td width="200px" nowrap>名前</td>
    <td nowrap>説明</td>
    <td width="100px" nowrap>操作</td>
  </tr>
  …
</テーブル> 

この例では、「説明」という列の内容が比較的長くなっています。個人的には、この列をフローティング幅の列として設定して、ページの幅に合わせることができると思います。

しかし、表の中に列幅よりも長い半角文字が出てくると、その内容によってtdの幅が分断されてしまいます。これはどのように解決したらよいでしょうか？

この問題の解決策は、詳細行の TD に style="word-wrap:break-word;" を追加することです。これにより、半角の連続文字が強制的に折り返され、列幅が分割されることがなくなります。

例：

    <td align="left" width="150px" style="word-wrap:break-word;">
      …
    </td>

この方法を適用すると、幅が設定されている td 列の問題を解決できますが、td 列に幅が設定されていない場合は、効果が得られないか、td が壊れてしまいます。どのように解決すればよいでしょうか?

この問題の解決策は、テーブルを定義するときに style="table-layout:fixed;" を追加することです。これにより、半角の連続文字が強制的に折り返され、列幅が崩れなくなります。このパラメータを使用した後は、tr (行) または td (列) に高さ属性を簡単に追加しないでください。そうしないと、テーブルがコンテンツによって適切な高さに引き伸ばされなくなります。

例：

<テーブルの幅="95%" 境界線="1" セルパディング="2" セル間隔="1" スタイル="table-layout:fixed;">
  …
</テーブル> 

この方法は、IE および FireFox ブラウザに適用できます。

HTML ページの適応幅テーブルに関するこの記事はこれで終わりです。適応幅テーブルの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。