Können Sie mit reinem CSS Tabellenzellen gleicher Breite und unterschiedlichem Inhalt erstellen?

Tabellenzellen gleicher Breite mit variablem Inhalt

Stellen Sie sich ein Szenario vor, in dem Sie mehrere Tabellenzellenelemente in einem Tabellencontainer haben. Trotz unterschiedlicher Inhaltsgrößen möchten Sie, dass diese Tabellenzellen die gleiche Breite haben. Gibt es eine reine CSS-Lösung, um dies zu erreichen?

Lösung:

Um unabhängig von der Inhaltsgröße gleich breite Tabellenzellen zu erreichen, können Sie den folgenden CSS-Ansatz verwenden :

1. Festes Tabellenlayout: Tabellenlayout anwenden: behoben; zum übergeordneten Div, das die Tabelle darstellt. Dies weist den Browser im Wesentlichen an, sich strikt an die angegebenen Zellenbreiten zu halten.
2. Mindestzellenbreite: Legen Sie für jede Zelle eine Mindestbreite fest, auch eine kleine Breite wie 2 % (div > div). Dies löst den gewünschten Tabellenlayout-Algorithmus aus, bei dem der Browser versucht, die angegebenen Zellenabmessungen zu berücksichtigen.

Codebeispiel:

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

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

Hinweis :

Diese Lösung funktioniert mit Chrome, IE8 und Safari 6 (mit einigen Einschränkungen). Es ist jedoch wichtig zu bedenken, dass Safari 6 im Vergleich zu anderen Browsern möglicherweise ein anderes Tabellenlayoutverhalten aufweist.

Das obige ist der detaillierte Inhalt vonKönnen Sie mit reinem CSS Tabellenzellen gleicher Breite und unterschiedlichem Inhalt erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!