HTMLページ適応型テーブル(table)

ページのWEBアプリケーションは、テーブルのプレゼンテーションが頻繁に発生し、列の数が限られている前提で、どのように画面の異なる解像度に各列のコンテンツを適応するために、これは比較的簡単に問題が発生する必要があります、次のような問題やビューに私のソリューションについて話をすることです。固定幅にすべての列を設定すると、明らかにそのような要件を満たすことはできませんが、すべての列が割合に設定されている場合、私はいくつかのサイズ、または解像度では、それは非常に見にくくなることを恐れている。もっと対処するために、次の方法に慣れて - 列の数の形で前提の多くはありません - 列が幅を設定しないまま、固定値で設定された死者の列幅のほとんどは、画面の割合（95％、98％など）に設定されたテーブルの幅を残す。98％など）。 

例

<table width="95%" border="1" cellpadding="2" cellspacing="1">
  <tr>
    <td width="50px" nowrap>serial</td>
    <td width="150px" nowrap>Category A</td>
    <td width="150px" nowrap>Category B</td>
    <td width="200px" nowrap>Name</td>
    <td nowrap>Description</td>
    <td width="100px" nowrap>operation</td>
  </tr>
  ......
</table> 

この場合、"Description"というカラムは比較的長いので、ページの幅に合わせるためにフローティング幅のカラムとして設定すればいいと思います。

しかし、テーブルの中にカラムの幅より長い半角文字がある場合、tdの幅がコンテンツによって壊れてしまうので、これを解決するにはどうしたらいいでしょうか。

この問題の解決策は、詳細行のtdにstyle="word-wrap:break-word;"を追加することです。これにより、連続した半角文字が強制的に改行され、列幅がはじかれることはありません。 

例

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

この方法を適用すると、幅が設定されているtdカラムは解決できますが、幅が設定されていないtdカラムは効果がない、またはtdが突出する場合、どのように解決すればよいでしょうか？

この問題の解決策は：テーブルを定義するときに、追加スタイル="テーブルレイアウト：固定;"、これはハーフコーナー連続文字強制改行、列幅をバーストすることはできませんすることができます。このパラメータを使用した後、簡単にtr（行）またはtd（列）に高さ属性を追加しないことに注意してください、これはもはやコンテンツによって適切な高さに立てないようにテーブルを発生させるでしょう。 

例

<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed ;">
  ......
</table> 

この方法は、IEとFireFoxのブラウザで動作します。

これは、HTMLページの適応幅のテーブル（表）についてのこの記事の終わりです、より関連するテーブル適応幅の内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！.