Pourquoi la table dépasse en largeur ?
Résolu
francine1407
Messages postés
8
Statut
Membre
-
francine1407 Messages postés 8 Statut Membre -
francine1407 Messages postés 8 Statut Membre -
Bonjour à Tous ;
je débute en css et HTML et y a une chose que j'ai du mal à comprendre . effet je dois établir un bon de commande avec une table à l'intérieur . le problème c'est que la largeur de la table dépasse la page qui lui est attribuée :( . comme ceci après un zoom .
http://hpics.li/d31554a
pour simplifier la structure de la table est comme ceci , remarquez j'ai créé une classe partage qui regroupe tout au lieu de body . la classe partage est en gris sur l'image . Donc selon la table est censée ne pas dépasser ce cadre .
code CSS
avez vous une idée de le résoudre merci d'avance
je débute en css et HTML et y a une chose que j'ai du mal à comprendre . effet je dois établir un bon de commande avec une table à l'intérieur . le problème c'est que la largeur de la table dépasse la page qui lui est attribuée :( . comme ceci après un zoom .
http://hpics.li/d31554a
pour simplifier la structure de la table est comme ceci , remarquez j'ai créé une classe partage qui regroupe tout au lieu de body . la classe partage est en gris sur l'image . Donc selon la table est censée ne pas dépasser ce cadre .
<body>
<div class="partage">
<table>
<thead>
<tr>
<th>Description</th>
<th>Customer </th>
</tr>
</thead>
<tbody>
<tr>
<td>produit1</td>
<td>1222</td>
</tr>
</tbody>
</table>
</div>
</body>
code CSS
body {
/* position: relative; */
/* margin: 0 auto; */
/* margin: auto;*/
/* width: 25cm;*/
color: #001028;
background-color:azure ;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: Arial;
}
.partage { background-color: grey;
margin:auto;
width: 50%;
}
table {
/* width: auto;*/
border-collapse: collapse;
border-spacing: 0;
margin-top:20px;
margin-bottom:20px;
margin-right: 5px;
margin-left: 5px;
border: 3px blue solid;
}
table tr:nth-child(2n-1) td {
background: #F5F5F5;
}
table th,
table td {
text-align: center;
}
table th {
padding: 5px 20px;
color: #5D6975;
border-bottom: 1px solid #C1CED9;
white-space: nowrap;
font-size:12px;
font-style: italic;
font-weight: bold;
}
table .service,
table .desc {
text-align: left;
}
table td {
padding: 20px;
text-align: right;
}
table td.service,
table td.desc {
vertical-align: top;
}
table td.unit,
table td.qty,
table td.total {
font-size: 1.2em;
}
table td.grand {
border-top: 1px solid #5D6975;
}
avez vous une idée de le résoudre merci d'avance
A voir également:
- Pourquoi la table dépasse en largeur ?
- Table ascii - Guide
- Table des matières word - Guide
- Table des caractères - Guide
- Table des annexes word ✓ - Forum Word
- WOrd 365 Liste des figures et annexes ✓ - Forum Word
et pour td 100% divisé par le nombre de td
après cest clair que si il y en a trop ca devient illisible
j'ai résolu le problème , pour info c'est le code css :
il m'a fallu du temps pour trouver l'origine
bon je vais essayer ta solution