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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。