Au Secours ! css

vieuJeu Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
madmyke Messages postés 53100 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour à tous,
je suis un vieux de la vieille qui utilisait jusqu'à hier, les bons vieux tableaux en dur ! (tout ce que vous n'aimez pas cligne
J'ai acheté des bouquins sur les css, et j'essaye y compris sur le web de comprendre un truc tout bête pour vous mais casse-tête pour moi car à force de lire, je m'embrouille complètement decu

résumé:
j'ai un tableau avec 3 colonnes et 3 rangées de cellules dont la 1ere rangée est le "th"
voici le code html:

<table id="table" summary="commandez ici en indiquant vos quantités">
<caption>commandez ici en indiquant vos quantités</caption>

<tr>
<th class="th">Quantité</th>
<th class="th">Designation</th>
<th class="th">Prix</th>
</tr>

<tr>
<td class="td">cellule A1</td>
<td class="td">cellule B1</td>
<td class="td">cellule C1</td>
</tr>

<tr>
<td class="td">cellule A2</td>
<td class="td">cellule B2</td>
<td class="td">cellule C2</td>
</tr>
</table>

mon problème:
comment définir:
- une largeur de 15% à la première colonne,
- une largeur de 70% à la colonne désignation
- une largeur de 15% à la colonne prix

voilà mon css actuel:

#table {
margin: auto;
border: 2px solid #3A4C2D;
border-collapse: collapse;
width: 70%;
}
.th {
font-family: Arial;
font-weight: bold;
text-align: center;
border: 2px solid #3A4C2D;
padding: 5px;
background-color: #D0E3FA;
}
.td {
font-family: arial;
border: thin solid #3A4C2D;
padding: 5px;
text-align: center;
background-color: #ffffff;
}
caption {
font-family: Arial;
}

J'ai lu des tas de trucs sur les tableaux mais je n'ai pas trouvé une seule explication aussi rustique que celle là
Je vous remercie d'avance pour votre aide précieuse
Bien à vous
VieuxJeu

5 réponses

madmyke Messages postés 53100 Date d'inscription   Statut Modérateur Dernière intervention   12 240
 
Bonjour

Un page toute simple avec exemple.
Facile à lire et comprendre
https://openweb.eu.org/articles/tableaux_css

Mais en gros il manque l'instruction "width: xx%;" dans le CSS

bav

DéCRIVEZ votre problème en DéTAIL, merci ! @Sauvez la terre! C'est la seule planète ou on trouve du chocolat!
0
vieuJeu Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Merci madmyke,
j'avais déjà visité cette page et c'est de celle-ci que j'ai tiré mon tableau,
dans cet exemple, le td prend une valeur en % mais ce qui attribue d'office les mêmes valeurs pour tous les td
Or, j'ai 3 colonnes
j'ai essayé :
width: 15% 70% 15%;
en pensant que ça allait fonctionner mais non ça ne marche pas

alors soit je suis vraiment bête et c'est devant mon nez ou bien c'est plus compliqué que ça ?

Merci pour votre réponse
0
madmyke Messages postés 53100 Date d'inscription   Statut Modérateur Dernière intervention   12 240
 
Ha oui flute autant pour moi, mais de fait avec les % écrit tel quel ça ne marchera pas.

Je n'avais pas capté le tout. Je ne suis pas expert en CSS mais voilà ce que j'ai trouvé.

En fait il faut si je comprends bien créer une "classe" pour chaque colonne et ensuite fixer la taille de la colonne "classex" dans le CSS.

Comme sur expliqué dans la discussion sur CE forum

DéCRIVEZ votre problème en DéTAIL, merci ! @Sauvez la terre! C'est la seule planète ou on trouve du chocolat!
0
vieuJeu Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Ok merci pour ce lien
effectivement ça fonctionne mais dommage qu'on ne puisse pas assigner une routine complète en une seule commande css
Merci bien àa solutionne quand même mon problème
VieuJeu
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
madmyke Messages postés 53100 Date d'inscription   Statut Modérateur Dernière intervention   12 240
 
En fait pour des tableaux dit "simple", il est possible et apparemment plus utilisé de faire des mises en page via des alignements de Div. mais bon c'est une autre "sujet" :-)

https://openweb.eu.org/articles/le-modele-tabulaire-en-css

DéCRIVEZ votre problème en DéTAIL, merci ! @Sauvez la terre! C'est la seule planète ou on trouve du chocolat!
0