Puis-je créer des tableaux en utilisant uniquement `` et CSS ?

Créer des tableaux en utilisant uniquement

et CSS

Énoncé du problème :

Créer des tableaux à l'aide de l'élément de table HTML traditionnel (

) peut être fastidieux. Une structure de table équivalente peut-elle être obtenue en utilisant uniquement

et CSS ?

Exemple de tableau :

L'exemple de tableau suivant est fourni :

<div>
<p> div></p>
<p><strong>CSS Style :</strong></p>
<p>Le code CSS suivant est fourni :</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;

}

Assistance pour IE7 et versions antérieures :

Le code fourni n'est pas compatible avec les versions IE7 et inférieures en raison de l'utilisation de display: table.

Solution alternative :

Pour résoudre le problème de compatibilité, le code CSS suivant peut être utilisé :

.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;

>

Avantages :

Ce code CSS alternatif fournit Compatibilité IE7 et versions antérieures tout en conservant la structure de type table souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!