Wie kann ich Colspan mit CSS „display: table-cell' simulieren?

Tabellenartige Anzeige für Zellen mit Colspan/Rowspan

Aktuelle CSS-Implementierungen bieten begrenzte Unterstützung für tabellenartige Layouts mithilfe der Anzeigeeigenschaft. Insbesondere unterstützen Elemente mit display: table-cell die Attribute colspan oder rowspan nicht.

Beispielcode:

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell</div>
  </div>
</div>

Problem:

Wie können wir einen Colspan-Effekt für Elemente mit Anzeige erzielen: table-cell?

Einschränkungen der CSS-Anzeige:

Leider erlaubt die aktuelle CSS-Spezifikation keinen Colspan oder Rowspan für Elemente mit display: table-cell. Wie im verwiesenen Beitrag erwähnt, handelt es sich hierbei um eine Einschränkung dieses Anzeigemodus.

Alternativen:

Da CSS kein Äquivalent zu colspan für die Anzeige bereitstellt: Tabelle- Zelle, erwägen Sie die Verwendung alternativer Layoutmethoden wie:

• Verwendung eines echten HTML Tabelle
• Verwendung absolut positionierter Divs innerhalb eines Containers mit display: table
• Erkundung von JavaScript-Frameworks wie Bootstrap, die Rastersysteme für flexible Layouts bereitstellen

Das obige ist der detaillierte Inhalt vonWie kann ich Colspan mit CSS „display: table-cell' simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!