Webページを作成していると、表の幅がずれてしまうという問題によく遭遇します。 HTMLのtableタグの高さと幅の設定内容を詳しく見てきましたが、まとめると以下のようになります。
1.テーブルの幅と高さの設定とその機能: テーブルに設定された高さは実際には最小値を設定します。つまり、テーブルの内容または行の合計の高さがこの設定値を超えると、テーブルの高さの値が設定されます。テーブルは自動的に拡張されます。テーブルの内容または行の高さがこの値に達しない場合、自動的にこの値まで拡張されます。テーブルに設定される幅の値は、通常、テーブル幅の最大値であり、内部コンテンツの幅がそれを超えても変更できません。 (内部コンテンツが画像の場合、表の幅は変更可能です。)
2. tr タグの幅と高さの設定とその機能: 最初の点からわかるように、テーブルの幅は変更できず、tr タグは変更するため、tr タグの幅の設定は効果がありません。もちろん効果はありません。したがって、tr の高さ設定についてのみ議論できます。tr の高さ設定は、複数の tr 間の設定に関連します。複数の tr に特定の高さの値が設定されている場合、各 tr の高さは設定値に比例して全体の高さの値に割り当てられます。ここでは合計の高さの値を記載します。複数の TRS が特定の高さの値を設定していない場合、合計の高さの値は均等に分散されます。一部の TR に特定の値が設定されており、一部の TR にデフォルトとして特定の値が設定されていない場合は、まず各 TR の基本的なニーズを確認し、次に特定の値が設定された残りの TR を満たしてから、すべての TR を満たします。特定の値が設定されていない場合。最後のケースでは、合計幅が tr の合計設定値に対して十分でない状況も考慮する必要があります。十分でない場合は、テーブルの高さが自動的に満たされます。ここに延長されました。次に高さを設定した tr を検討し、最後に高さを設定しない tr を検討します。
3. td タグの幅と高さの設定とその機能: td タグの幅と高さは両方とも有効です。まず、TD の幅を見てみましょう。これは、列内の各 TD の幅と関連しています。これが最も混乱する点です。ここで、特定の TD の幅を全体的な観点から把握する必要があります。この幅の設定からその幅を決定することはできません。各列の幅を把握すると、扱いやすくなります。このとき、各 TD 間の幅の配分は、2 番目の記事の各 tr の高さ配分ルールに基づいています。1 つの違いは、デフォルトでは、各 TD の幅が均等に配分されるのではなく、実際の比率に応じて配分されることです。コンテンツを配布します。 td の高さの設定を見てみましょう。これは比較的単純ですが、各 td の高さは、その行内の各 td の高さを決定する行の最大の高さに依存します。各行の高さの割り当ての原理は同じです。もう 1 つ注意すべき点は、td の高さと tr の高さの関係です。まず、コンテンツのニーズに基づいて、一方に設定値があり、もう一方に設定値がない場合は、どちらか大きい方の設定値が使用されるかが決まります。設定値の場合、その設定値が使用されます。
1. 伝統的な方法を使用する
<table width=400> <tr> <td width=100></td> <td width=100></td> <td width=100></td> <td width=100></td> < /tr> <テーブル>
2.CSSを使用する
<style>.td{width:100px;}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class=td> </td> <td class=td></td> </tr> <テーブル>上記 2 つの方法で考えられる問題は、コンテンツが設定を超える場合 (画像の幅が 100 を超える場合など)、自然に拡張され、表の幅が自動的に調整されてしまうことです。
3.CSSを使用する
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td クラス=td></td> <td class=td></td> </tr> <テーブル>このメソッドを使用すると、厳密な制御が必要な場合にオーバーフロー属性値をスクロールまたは自動に設定する場合に使用できます。オーバーフロー属性値をスクロールまたは自動に設定すると、このメソッドを使用できます。スクロールまたは自動に設定した場合は、スクロール バーを使用して調整できます。
要約する以上、エディターが紹介したHTMLテーブルのセルの幅と高さを設定する方法でした。ご質問がございましたら、メッセージを残していただければ編集部から返信させていただきます。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！