Wie gleicht man die Breite von Tabellenzellen in CSS aus?

Angleichung der Breite von Tabellenzellen in CSS

In einer Tabelle mit mehreren Zellen kann es schwierig sein, gleiche Breiten sicherzustellen, wenn der Inhalt in jeder Zelle vorhanden ist variiert. Dieses Problem tritt auf, wenn versucht wird, eine maximale Breite festzulegen, da hierfür die Kenntnis der Gesamtzahl der Zellen erforderlich wäre.

Reine CSS-Lösung

Glücklicherweise gibt es eine reine CSS-Lösung zum Angleichen der Breite von Tabellenzellen, unabhängig von Inhaltsvariationen. Diese Technik nutzt die folgenden CSS-Eigenschaften:

1. table-layout: Fixed;: Diese Eigenschaft erzwingt ein festes Layout für die Tabelle und stellt sicher, dass die Zellen die angegebenen Breiten einhalten.
2. Breite für jede Zelle: Um den alternativen Tabellenberechnungsalgorithmus auszulösen, weisen wir eine kleine Breite (z. B. 2 %) zu jede Zelle.

Implementierung

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

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

Dieses CSS stellt sicher, dass die Tabellenzellen auch bei unterschiedlichem Inhalt die gleiche Breite haben.

Kompatibilitätsüberlegungen

Das Tabellenlayout: behoben; Die Eigenschaft wird in modernen Browsern, einschließlich Chrome und IE8, weitgehend unterstützt. Allerdings implementiert Safari 6 unter OS X diese Eigenschaft anders, was möglicherweise zu unerwarteten Ergebnissen führt. Als Vorsichtsmaßnahme wird empfohlen, Ihre Lösung in verschiedenen Browsern zu testen, um mögliche Kompatibilitätsprobleme auszuschließen.

Das obige ist der detaillierte Inhalt vonWie gleicht man die Breite von Tabellenzellen in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!