Pourquoi la table dépasse en largeur ?

Résolu

francine1407 Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
francine1407 Messages postés 6 Date d'inscription Statut Membre Dernière intervention - 5 juil. 2015 à 09:35

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 .


<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 annexes word ✓ - Forum Word
Table des caractères - Guide
Le délai d'attente est dépassé ✓ - Forum Mozilla Firefox

1 réponse

Réponse 1 / 1

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

Bonjour.
Le problème c'est qu'il y a beaucoup trop de colonne.
L'idéal serais d'en supprimer quelques une mais j'imagine que ce n'est pas envisageable.

dans ce cas soit tu réduit le font-size soit du met un overflow-x: auto sur le conteneur.

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

mets un width de 100% a table
et pour td 100% divisé par le nombre de td
après cest clair que si il y en a trop ca devient illisible

francine1407 Messages postés 6 Date d'inscription Statut Membre Dernière intervention > animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention

merci beaucoup pour vos réponses .

j'ai résolu le problème , pour info c'est le code css :


white-space: nowrap;

il m'a fallu du temps pour trouver l'origine

francine1407 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

tu as parfaitement raison , oui y a trop de div et span . à part ces 2 balises , je ne trouve pas les balises adéquates .

bon je vais essayer ta solution

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

Dimensions L x l x H : comment lire ces infos ?

Intégrer une table des annexes et des matières sur word

insérer une table d'illustration

Sommaire + Table des matières + Table des Annexes

Votre réponse

Discussions similaires