) peut être fastidieux. Une structure de table équivalente peut-elle être obtenue en utilisant uniquement <div> et CSS ?
Exemple de tableau :
L'exemple de tableau suivant est fourni :
<div>
<div>
CSS Style :
Le code CSS suivant est fourni :
.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;
}
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 */
}
display: table-row;
width: auto;
clear: both;
}
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!
Déclaration： Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
