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 が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...
ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...
目次Express ミドルウェアとは何ですか? Expressミドルウェアを作成するための要件Exp...
この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さ...
データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...
FORM 要素の enctype 属性は、フォーム データがサーバーに送信されるときに使用されるエン...
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...
この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...
ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...
[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...
目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...
この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...
Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...
最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...