Sujet Précédent Sujet Suivant

Pourquoi la table dépasse en largeur ?

Résolu/Fermé
francine1407 Messages postés 6 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 15 septembre 2016 - Modifié par francine1407 le 2/07/2015 à 16:51
francine1407 Messages postés 6 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 15 septembre 2016 - 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

1 réponse

Réponse 1 / 1
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 2/07/2015 à 17:25
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.
1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
2 juil. 2015 à 21:37
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
0
francine1407 Messages postés 6 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 15 septembre 2016 > animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019
5 juil. 2015 à 09:35
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
0
francine1407 Messages postés 6 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 15 septembre 2016
2 juil. 2015 à 21:38
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
0

Discussions similaires

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

10 réponses
Image Subliminale dans une vidéo
fred16430 -
fred16430 -

6 réponses
Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
Création du sommaire sous Word
Licorne rose -
C-Claire -

11 réponses
[Firefox] Délai d'attente dépassé !
Ralphie_ -
paja -

44 réponses