Puis-je créer des tableaux en utilisant uniquement `` et CSS ?-tutoriel CSS-php.cn

Can I Create Tables Using Only `` and CSS?

Créer des tableaux en utilisant uniquement <div> 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 <div> et CSS ?

Exemple de tableau :

L'exemple de tableau suivant est fourni :

<div>

<div>

Copier après la connexion

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 */

Copier après la connexion

}

.divRow
{

display: table-row;
width: auto;

Copier après la connexion

}

.divCell
{

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

Copier après la connexion

}

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 */

Copier après la connexion

}
.div-table-row {

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

Copier après la connexion

}
.div-table-col {

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

Copier après la connexion

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!

source：php.cn

Article précédent：Comment puis-je afficher plusieurs éléments Div en ligne sur une seule ligne ? Article suivant：Comment puis-je enregistrer les modifications CSS apportées dans le panneau Styles de Chrome DevTools ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2167

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2317

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1951

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...