Heim >Web-Frontend >CSS-Tutorial >Kann ich Tabellen nur mit „' und CSS erstellen?

Kann ich Tabellen nur mit „' und CSS erstellen?

Mary-Kate OlsenOriginal: 2024-12-11 10:32:11474Durchsuche

Can I Create Tables Using Only `` and CSS?

Erstellen Sie Tabellen nur mit <div> und CSS

Problemstellung:

Das Erstellen von Tabellen mit dem herkömmlichen HTML-Tabellenelement (

) kann umständlich sein. Kann eine äquivalente Tabellenstruktur nur mit <div> erreicht werden? und CSS?

Beispieltabelle:

Die folgende Beispieltabelle wird bereitgestellt:

<div>

<div>

CSS-Styling:

The Der folgende CSS-Code lautet vorausgesetzt:

.divTable
{

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}

.divRow
{

display: table-row;
width: auto;

}

.divCell
{

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Unterstützung für IE7 und niedriger:

Der bereitgestellte Code ist aufgrund der Verwendung von display:table nicht mit IE7 und niedrigeren Versionen kompatibel.

Alternative Lösung:

Um das Kompatibilitätsproblem zu beheben, kann der folgende CSS-Code verwendet werden:

.div-table {

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}
.div-table-row {

display: table-row;
width: auto;
clear: both;

}
.div-table-col {

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Vorteile:

Dieser alternative CSS-Code bietet Kompatibilität mit IE7 und darunter unter Beibehaltung der gewünschten tabellenartigen Struktur.

Das obige ist der detaillierte Inhalt vonKann ich Tabellen nur mit „' und CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for while using this display table issue

Stellungnahme：

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

Vorheriger Artikel：Wie kann ich mehrere Div-Elemente inline in einer einzigen Zeile anzeigen?Nächster Artikel：Wie kann ich mehrere Div-Elemente inline in einer einzigen Zeile anzeigen?

In Verbindung stehende Artikel

Mehr sehen