HTML テーブル セルの幅と高さを設定する方法

HTML テーブル セルの幅と高さを設定する方法

Web ページを作成するときに、テーブルの幅が揃っていないという問題に遭遇することがよくあります。 HTML のテーブル タグの高さと幅の設定の詳細を確認した後、要約すると次のようになります。

1.テーブルの幅と高さの設定とその機能: テーブルに設定された高さは、実際には最小値を設定します。つまり、テーブル内のコンテンツまたは行の高さの合計値がこの設定値を超えると、テーブルの高さの値が自動的に拡張されます。テーブル内のコンテンツまたは行の高さがこの値に達しない場合は、自動的にこの値まで拡張されます。テーブルに設定された幅の値は、通常、テーブルの最大幅であり、内部コンテンツの幅がそれを超えた場合でも変更できません。 (内部コンテンツが画像の場合、テーブルの幅を変更できます。)

2. tr タグの幅と高さの設定とその機能: tr タグの幅の設定は効果がありません。最初のポイントからわかるように、テーブルの幅は変更できないため、tr タグは確かに効果がありません。したがって、tr での高さ設定の可能性についてのみ議論することができ、tr での高さ設定は複数の tr 間の設定に関連しています。複数のtrに特定の高さの値が設定されている場合は、設定された値の割合に応じて各trの高さを分配し、合計の高さの値を分配します。これは合計の高さの値であることに注意してください。複数の tr 要素に特定の高さの値が設定されていない場合、合計の高さの値は均等に分散されます。一部の tr に特定の値が設定され、一部に特定の値がデフォルトで設定されていない場合は、まず各 tr の基本的なニーズを確保し、次に特定の値が設定されている残りの tr を満たしてから、特定の値が設定されていない tr にすべて与えます。最後のケースでは、合計幅が tr の合計設定値に足りない状況も考慮する必要があります。足りない場合は、tr の基本的なニーズを満たす必要があり、ここでテーブルの高さが自動的に拡張されます。次に、heightr が設定された tr を検討し、最後に height が設定されていない tr を検討します。

3. td タグの幅と高さの設定とその機能: td タグの幅と高さは両方とも有効です。まず td の幅を見てみましょう。td の幅は、その td がある列にあるすべての td の幅と関連しています。最大の幅が、この列にある各 td の幅として採用されます。これが最もわかりにくい部分です。td の幅は、全体的な観点から把握する必要があります。この td の幅の設定に基づいてその幅を断言することはできません。これは不正確です。各列の幅がわかれば、物事は簡単になります。このとき、各 td 間の幅の配分は、第 2 条の各 tr の高さの配分規則に従います。 1 つの違いは、デフォルトの場合、各 td の幅は均等に配分されるのではなく、実際の内容に応じて比例配分されることです。 td の高さ設定を見てみましょう。これは比較的簡単です。ただし、各 td の高さは、td が配置されている行の最大高さによって決まり、この行の各 td の高さが決まります。すると、各行の高さは tr の高さ割り当ての原則と同じになります。注目すべきもう 1 つの点は、td の高さと tr の高さの関係です。まず、コンテンツのニーズに基づいて決定する必要があります。これに基づいて、設定値に応じて決定されます。設定値が大きい方に従います。一方に設定値があり、もう一方に設定値がない場合は、設定値が使用されます。

1. 伝統的な方法を使用する

<テーブルの幅="400"> 
<tr> 
<td 幅="100"></td> 
<td 幅="100"></td> 
<td 幅="100"></td> 
<td 幅="100"></td> 
</tr> 
<テーブル>

2. CSSを使用する

<スタイル>
.td{幅:100px;}
</スタイル>
<テーブルの幅="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<テーブル>

上記 2 つの方法の問題点は、画像の幅が 100 を超えるなど、コンテンツが設定を超えると自然に拡大し、テーブルの幅が自動的に調整されることです。

3. CSSを使用する

<スタイル>
.td{幅:100px;オーバーフロー:非表示}
</スタイル>
<テーブルの幅="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<テーブル>

このメソッドは、制限を超えた部分を非表示にするために使用できます。厳密な制御が必要な場合は、このメソッドを使用できます。overflow 属性値が scroll または auto に設定されている場合、このメソッドを使用できます。overflow 属性値が scroll または auto に設定されている場合、制限を超えた部分をスクロールバーで調整できます。

要約する

上記は、エディターが紹介した HTML テーブル セルの幅と高さを設定する方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Dockerコンテナがホストポートにアクセスできない場合の解決策

>>:  全画面ページのスクロール効果を実現するJavaScript

推薦する

あなたのウェブサイトはIE8に適していますか?

オリンピック期間中にIE8ベータ2がリリースされ、英語版のリリースに合わせて中国語版も第一波でリリー...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)

CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

SQL文のANDとORの実行順序で発生する問題

質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...

Dockerコンテナのいくつかの保存方法の詳細な説明

目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...

MySQL GROUP_CONCAT 制限の解決

効果: GROUP_CONCAT関数は、フィールド値を文字列に連結することができます。デフォルトの区...

LinuxにPHP7をインストールする方法の詳細な説明

Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...

HTTP ヘッダー情報の解釈と分析 (詳細概要)

HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...

MySQL 8.0の新機能、隠しフィールドの詳細な説明

序文MySQL バージョン 8.0.23 では、新しい機能「Invisible Column (In...

MySQLは既存のコンテンツを保持し、後でコンテンツを追加します

このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...

CSSを使用して円形の波効果を実現する

モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果...

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...