Kann CSS die Breite von Tabellenzellen unabhängig von der Inhaltsgröße steuern?-CSS-Tutorial-php.cn

Kann CSS die Breite von Tabellenzellen unabhängig von der Inhaltsgröße steuern?

DDD

Freigeben： 2024-11-05 01:36:02

Original

410 Leute haben es durchsucht

Can CSS Control Table Cell Widths Regardless of Content Size?

Steuern der Tabellenzellenbreiten mit CSS

Im Bereich von HTML-Tabellen kann es eine Herausforderung sein, die einheitliche Breite von Tabellenzellen sicherzustellen, wenn es um Inhalte unterschiedlicher Größe geht. Können wir dieses gewünschte Ergebnis allein durch CSS erreichen, unabhängig von der Anzahl der beteiligten Zellen?

Die HTML-Struktur ist unkompliziert: ein übergeordnetes

dient als Tabellencontainer, während das untergeordnete

Elemente stellen die Tabellenzellen dar.

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

Nach dem Login kopieren

CSS kann genutzt werden, um dieses Problem zu beheben. Um unabhängig von der Inhaltsgröße gleiche Zellenbreiten sicherzustellen, müssen wir:

den Mechanismus für das feste Tabellenlayout auslösen:Tabellenlayout festlegen: fest; auf dem übergeordneten
. Dadurch wird der Browser angewiesen, die angegebenen Zellenbreiten zu erzwingen, anstatt sie automatisch an den Inhalt anzupassen.
Tabellenzellen eine Breite zuweisen: Die Zuweisung einer kleinen Breite (z. B. 2) ist zwar nicht zwingend erforderlich %) zu jedem
Die Darstellung einer Tabellenzelle fungiert als Auslöser für das feste Tabellenlayout.

Der endgültige CSS-Code sieht wie folgt aus:

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%;
}</code>

Nach dem Login kopieren

Mit diesem Ansatz bleiben die Tabellenzellen gleich Breiten, um unabhängig vom Inhalt ein einheitliches Erscheinungsbild zu gewährleisten.

Das obige ist der detaillierte Inhalt vonKann CSS die Breite von Tabellenzellen unabhängig von der Inhaltsgröße steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie richtet man Beschriftungen neben Eingaben in Formularen aus? Nächster Artikel：So schließen Sie bestimmte Klassen aus CSS-Selektoren aus: Eine Schritt-für-Schritt-Anleitung

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors