Table en css
Résolu
jjaco
Messages postés
534
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Table en css
- Table ascii - Guide
- Table des matières word - Guide
- Table des caractères - Guide
- Tableau croisé dynamique ou table de pilote - Guide
- Table des annexes word - Forum Word
6 réponses
C'est bizarre, j'ai essayé avec ce code (identique à ton dernier, je pense) :
Et ça marche très bien. J'ai testé dans Firefox ET Explorer 8.
J'ai même essayé sans le <doctype> : même résultat...
Bien sûr faut encore spécifier les tailles, les couleurs, etc...
Je suis un paranoïaque à l'inverse : je crois que l'univers conspire à me rendre heureux.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.table {
display:table;
border: medium solid #6495ed;
border-collapse: collapse;
width: 75%;
}
.tbody { }
.tr {
display:table-row;
height: 400px;
}
.td {
display:table-cell;
border: thin solid #6495ed;
width: 33%;
padding: 5px;
text-align: center;
background-color: #fc0c0c0;
}
</style>
</head>
<body>
<div class= "table">
<div class="tr">
<div class="td"> 1 </div>
<div class="td"> 2 </div>
<div class="td"> 3 </div>
</div>
<div class="tr">
<div class="td"> 4 </div>
<div class="td"> 5 </div>
<div class="td"> 6 </div>
</div>
</div>
</body>
</html>
Et ça marche très bien. J'ai testé dans Firefox ET Explorer 8.
J'ai même essayé sans le <doctype> : même résultat...
Bien sûr faut encore spécifier les tailles, les couleurs, etc...
Je suis un paranoïaque à l'inverse : je crois que l'univers conspire à me rendre heureux.
arthezius
Messages postés
3538
Date d'inscription
Statut
Membre
Dernière intervention
475
Effectivement il fonctionne très bien de mon côté aussi.
Salut !
Ce que je te conseille, pour aller vite, c'est de jouer avec les styles CSS suivants :
Normalement, ça devrait faire un travail propre illico.
Dis-moi si ça marche !
Ce que je te conseille, pour aller vite, c'est de jouer avec les styles CSS suivants :
.table { display:table; }
.tr { display:table-row; }
.td { display:table-cell; }
Normalement, ça devrait faire un travail propre illico.
Dis-moi si ça marche !
Comme ceci?, ça donne pas mieux
je dois tout de même indiquer des parametres, bordure, hauteur, largeur etc...
/* CSS Document */
.table
{ display:table;
border: medium solid #6495ed;
border-collapse: collapse;
width: 75%;
}
.tbody
{
}
.tr
{ display:table-row;
height: 400px;
}
.td
{ display:table-cell;
border: thin solid #6495ed;
width: 33%;
height: 400px;
padding: 5px;
text-align: center;
background-color: #c0c0c0;
}
je dois tout de même indiquer des parametres, bordure, hauteur, largeur etc...
/* CSS Document */
.table
{ display:table;
border: medium solid #6495ed;
border-collapse: collapse;
width: 75%;
}
.tbody
{
}
.tr
{ display:table-row;
height: 400px;
}
.td
{ display:table-cell;
border: thin solid #6495ed;
width: 33%;
height: 400px;
padding: 5px;
text-align: center;
background-color: #c0c0c0;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tu as dans ton premier code un tableau html et ensuite une série de div...
Par défaut, les div sont de type block et donc prennent toute la largeur de la ligne ce qui force la suivante à passer à la ligne suivante.
Rajoute dans ton CSS:
Par défaut, les div sont de type block et donc prennent toute la largeur de la ligne ce qui force la suivante à passer à la ligne suivante.
Rajoute dans ton CSS:
div.td{width:32.2%;float: left;}Tu devrais avoir tes "cellules" sur une seule ligne.
meci arthezius, ça fonctionne...
encore une question
c'est mieux .table ou #table avec respectivement div class ou div id ?
toutes mes cellules sont grises puisque j'ai choisi c0c0c0
mais comment faire si je souhaite changer la couleur d'une cellule en red par ex?
merci
encore une question
c'est mieux .table ou #table avec respectivement div class ou div id ?
toutes mes cellules sont grises puisque j'ai choisi c0c0c0
mais comment faire si je souhaite changer la couleur d'une cellule en red par ex?
merci
c'est mieux .table ou #table
Ça dépend ce que tu veux faire. Si tu es sûr(e) et certain(e) de n'avoir que cette table à avoir ce design sur une page, alors un ID serait conseillé. Mais si tu veux que plusieurs tables partagent la même apparence, alors pas le choix, ce sera une classe.
comment faire si je souhaite changer la couleur d'une cellule en red
Tu changes le code de ta div :
Et tu rajoutes le CSS :
Ça dépend ce que tu veux faire. Si tu es sûr(e) et certain(e) de n'avoir que cette table à avoir ce design sur une page, alors un ID serait conseillé. Mais si tu veux que plusieurs tables partagent la même apparence, alors pas le choix, ce sera une classe.
comment faire si je souhaite changer la couleur d'une cellule en red
Tu changes le code de ta div :
<div class="td rouge">...</div>
Et tu rajoutes le CSS :
div.td.rouge { background-color:#F00; }