So legen Sie die Breite und Höhe von HTML-Tabellenzellen fest

Beim Erstellen von Webseiten tritt häufig das Problem nicht übereinstimmender Tabellenbreiten auf. Nachdem wir uns die Details der Höhen- und Breiteneinstellungen des Tabellen-Tags in HTML angesehen haben, folgt hier eine Zusammenfassung:

1. Die Breiten- und Höheneinstellungen in der Tabelle und ihre Funktionen : Die in der Tabelle eingestellte Höhe legt tatsächlich einen Mindestwert fest. Das heißt, wenn der Gesamtwert des Inhalts oder der Zeilenhöhe in der Tabelle diesen eingestellten Wert überschreitet, wird der Höhenwert der Tabelle automatisch erweitert. Wenn der Inhalt oder die Zeilenhöhe in der Tabelle diesen Wert nicht erreicht, wird sie automatisch auf diesen Wert erweitert. Der in der Tabelle eingestellte Breitenwert ist grundsätzlich die maximale Breite der Tabelle und kann nicht verändert werden, auch wenn die Breite des internen Inhalts diesen Wert überschreitet. (Wenn der interne Inhalt ein Bild ist, kann die Breite der Tabelle geändert werden.)

2. Die Breiten- und Höheneinstellungen im tr-Tag und ihre Funktionen : Die Breiteneinstellung im tr-Tag hat keine Auswirkung, da, wie aus dem ersten Punkt ersichtlich, die Breite der Tabelle nicht geändert werden kann und das tr-Tag daher sicherlich keine Auswirkung hat. Daher können wir nur die Möglichkeit der Höheneinstellung in tr diskutieren, und die Höheneinstellung in tr bezieht sich auf die Einstellungen zwischen mehreren trs. Wenn für mehrere TRs bestimmte Höhenwerte festgelegt sind, wird die Höhe jedes TRs entsprechend dem Anteil des festgelegten Werts verteilt, um den Gesamthöhenwert zu verteilen. Beachten Sie, dass dies der Gesamthöhenwert ist. Wenn für mehrere tr-Elemente kein spezifischer Höhenwert festgelegt ist, wird der Gesamthöhenwert gleichmäßig verteilt. Wenn für einige TRs standardmäßig bestimmte Werte festgelegt sind und für andere nicht, stellen Sie zuerst die Grundanforderungen jedes TRs sicher und erfüllen Sie dann die verbleibenden TRs, für die bestimmte Werte festgelegt wurden. Anschließend werden alle TRs vergeben, für die keine bestimmten Werte festgelegt wurden. Im letzten Fall muss auch die Situation berücksichtigt werden, in der die Gesamtbreite für den Gesamteinstellungswert von tr nicht ausreicht. Wenn dies nicht ausreicht, müssen die Grundanforderungen von tr erfüllt werden, und die Höhe der Tabelle wird hier automatisch erweitert. Betrachten Sie dann den TR mit eingestellter Höhe und schließlich den TR ohne eingestellte Höhe.

3. Die Breiten- und Höheneinstellungen im td-Tag und ihre Funktionen : Sowohl die Breite als auch die Höhe im td-Tag sind wirksam. Schauen wir uns zuerst die Breite von td an. Die Breite eines td hängt mit der Breite jedes td in der Spalte zusammen, in der es sich befindet. Die größte Breite wird als Breite jedes td in dieser Spalte genommen. Das ist für uns der verwirrendste Teil. Wir müssen die Breite eines td aus einer globalen Perspektive erfassen. Wir können seine Breite nicht basierend auf der Breiteneinstellung dieses tds behaupten. Das ist ungenau. Sobald wir die Breite jeder Spalte ermittelt haben, ist alles ganz einfach. Zu diesem Zeitpunkt folgt die Breitenverteilung zwischen jedem td der Höhenverteilungsregel jedes tr im zweiten Artikel. Ein Unterschied besteht darin, dass im Standardfall die Breite jedes td nicht gleichmäßig verteilt ist, sondern proportional entsprechend ihrem tatsächlichen Inhalt verteilt ist. Schauen wir uns die Höheneinstellung von td an. Das ist relativ einfach. Die Höhe jedes td hängt jedoch von der maximalen Höhe der Zeile ab, in der sich das td befindet, um die Höhe jedes td in dieser Zeile zu bestimmen. Dann entspricht die Höhe jeder Zeile dem Höhenzuordnungsprinzip in tr. Beachten Sie außerdem die Beziehung zwischen der Höhe von td und der Höhe von tr. Zunächst muss es auf den Anforderungen des Inhalts basieren. Auf dieser Grundlage wird es entsprechend dem eingestellten Wert bestimmt. Derjenige mit dem größeren eingestellten Wert wird befolgt. Wenn einer einen eingestellten Wert hat und der andere nicht, wird der eingestellte Wert verwendet.

1. Verwenden Sie traditionelle Methoden

<Tabellenbreite="400"> 
<tr> 
<td Breite="100"></td> 
<td Breite="100"></td> 
<td Breite="100"></td> 
<td Breite="100"></td> 
</tr> 
<Tabelle>

2. Verwenden Sie CSS

<Stil>
.td{width:100px;}
</Stil>
<Tabellenbreite="400"> 
<tr> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
</tr> 
<Tabelle>

Das Problem bei den beiden oben genannten Methoden besteht darin, dass, wenn der Inhalt die Einstellung überschreitet, z. B. wenn die Bildbreite größer als 100 ist, er natürlich erweitert wird und die Tabellenbreite automatisch angepasst wird.

3. Verwenden Sie CSS

<Stil>
.td{width:100px;overflow:hidden}
</Stil>
<Tabellenbreite="400"> 
<tr> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
<td Klasse="td"></td> 
</tr> 
<Tabelle>

Mit dieser Methode kann der Teil ausgeblendet werden, der den Grenzwert überschreitet. Wenn eine strenge Kontrolle erforderlich ist, kann diese Methode verwendet werden. Wenn der Wert des Überlaufattributs auf „Scrollen“ oder „Auto“ eingestellt ist, kann diese Methode verwendet werden. Wenn der Wert des Überlaufattributs auf „Scrollen“ oder „Auto“ eingestellt ist, kann die Bildlaufleiste verwendet werden, um den Teil anzupassen, wenn er den Grenzwert überschreitet....

Zusammenfassen

Oben ist die vom Editor eingeführte Methode zum Einstellen der Breite und Höhe von HTML-Tabellenzellen. Ich hoffe, sie wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!