HTML ページ適応幅テーブル

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 をよろしくお願いいたします。

<<:  Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

>>:  Prometheusコンテナのデプロイメントのための実用的なソリューション

推薦する

MySQL で乱数を生成し、文字列を連結する方法の例

この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

Node.jsミドルウェアの仕組みの詳細な説明

目次Express ミドルウェアとは何ですか? Expressミドルウェアを作成するための要件Exp...

CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例

この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さ...

MySQLデータベースのトランザクション分離レベルの詳細な説明

データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...

ファイルをアップロードするときに enctype フィールドを使用する理由は何ですか?

FORM 要素の enctype 属性は、フォーム データがサーバーに送信されるときに使用されるエン...

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

HTML 再利用テクニック

HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

Linux環境変数の設定戦略の詳細な説明

ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...

LeetCode の SQL 実装 (177. 給与が N 番目に高い)

[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...

Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル

この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...

Nginx で CDN サーバーを構築する方法の詳細な説明 (画像とテキスト)

Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...

Vue で親コンポーネントから子コンポーネントにデータを渡すいくつかの方法

最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...