web-dev-qa-db-fra.com

Conteneur div débordant de table à 100% de largeur

J'ai des problèmes avec une table HTML qui déborde de son conteneur parent. J'ai installé un exemple jsfiddle ici pour illustrer le problème. 

Comment puis-je forcer à la fois le texte d'en-tête et le texte de la cellule de tableau afin qu'il soit correctement placé dans son conteneur? Je préférerais une méthode CSS uniquement, mais suis également ouvert à l’utilisation de Javascript (ou jQuery) si cela est absolument nécessaire.

htmlcsshtml-table
99
Victor

Dans une perspective purement "adaptez-le à la div", ajoutez ce qui suit à votre classe de table ( jsfiddle ):

table-layout: fixed;
width: 100%;

Définissez la largeur de votre colonne comme vous le souhaitez; sinon, l'algorithme de mise en page fixe répartira la largeur de la table de manière uniforme sur vos colonnes.

Pour une référence rapide, voici les algorithmes d’agencement de table,

  • Fixe ( source )
    Avec cet algorithme (rapide), la disposition horizontale de la table ne dépend pas du contenu des cellules; cela dépend uniquement de la largeur de la table, de la largeur des colonnes et des bordures ou de l'espacement des cellules.
  • Automatique ( source )
    Dans cet algorithme (qui ne nécessite généralement pas plus de deux passes), la largeur de la table est donnée par la largeur de ses colonnes [ en fonction du contenu] (et intervenant frontières ).

    [...] Cet algorithme peut être inefficace car il nécessite que l'agent utilisateur ait accès à tout le contenu du tableau avant de déterminer la mise en page finale et peut exiger plusieurs passes.

Cliquez sur la documentation source pour voir les spécificités de chaque algorithme.

197
canon

Essayez d'ajouter 

Word-break: break-all

au CSS sur votre élément de table. 

Les mots dans les cellules du tableau seront brisés de telle sorte que le tableau ne devienne pas plus large que son div le contenant, mais que les colonnes du tableau ont toujours une taille dynamique. jsfiddle demo .

43
Jon Schneider

Ajoutez display: block; et overflow: auto; à .my-table. Cela va simplement couper tout ce qui dépasse la limite 280px que vous avez appliquée. Il n’ya aucun moyen de rendre cela "joli" avec cette exigence en raison de mots comme pélagosthrough qui sont plus larges que 280px.

15
David Titarenco

Essayez d’ajouter à td:

display: -webkit-box; // to make td as block
Word-break: break-Word; // to make content justify

les tds débordés s'aligneront sur la nouvelle ligne.

1
usernaveen

Compte tenu de vos contraintes, je pense que définir overflow: scroll; sur le .page div est probablement votre seule option. 280 px est assez étroit et, compte tenu de la taille de la police, le seul habillage ne suffit pas. Certains mots sont juste longs et ne peuvent pas être emballés. Vous pouvez soit réduire considérablement la taille de votre police, soit utiliser le débordement: faites défiler.

0
Peter Lyons

mettez à jour votre CSS avec ce qui suit: cela devrait corriger

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}
0
Sugeng Sulistiyawan