Kann ich Tabellen nur mit „' und CSS erstellen?

Erstellen Sie Tabellen nur mit

und CSS

Problemstellung:

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

) kann umständlich sein. Kann eine äquivalente Tabellenstruktur nur mit

erreicht werden? und CSS?

Beispieltabelle:

Die folgende Beispieltabelle wird bereitgestellt:

<div>
<p> div></p>
<p><strong>CSS-Styling:</strong></p>
<p>The Der folgende CSS-Code lautet vorausgesetzt:</p>
<p>.divTable<br>{</p>
<pre class="brush:php;toolbar:false">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!