100% de la largeur de la table de débordement conteneur div
Je suis d'avoir des problèmes avec un tableau html qui déborde c'est du conteneur parent. J'ai d'installation un exemple de jsfiddle ici pour illustrer le problème.
Comment puis-je la force à la fois le texte d'en-tête et le tableau le texte de la cellule pour l'envelopper dans une manière qu'il puisse rentrer dans son récipient correctement? Je préfère un CSS seule méthode, mais je suis aussi ouvert à l'aide de Javascript (jQuery) si cela est absolument nécessaire.
Vous devez vous connecter pour publier un commentaire.
D'une approche purement "faire rentrer dans la div" point de vue, ajoutez à votre classe de la table (jsfiddle):
Définir votre largeurs de colonne que, sinon, l'algorithme de mise en page va distribuer la largeur de la table de manière uniforme sur vos colonnes.
Pour une référence rapide, voici le tableau de présentation des algorithmes, c'est moi qui souligne:
Cliquez sur par le biais de la documentation de la source pour voir les détails de chaque algorithme.
Essayez d'ajouter
de la CSS sur votre élément de la table.
Qui vous permettra d'obtenir les mots dans les cellules de la table à casser, tels que la table ne pousse pas plus large que son div contenant, mais les colonnes de la table sont toujours de taille dynamique. jsfiddle démo.
word-wrap: break-word;
word-break: break-word
qui fonctionne le mieux.Ajouter
display: block;
etoverflow: auto;
à.my-table
. Ce sera tout simplement couper tout le passé de la280px
limite que vous avez appliquée. Il n'y a aucun moyen de le faire "à l'air assez" à cette exigence grâce à des mots commepélagosthrough
qui sont plus larges que280px
.Essayez d'ajouter à
td
:débordé tds s'aligner sur la nouvelle ligne.
Bien, compte tenu de vos contraintes, je pense que le réglage de
overflow: scroll;
sur le.page
div est probablement votre seule option. 280 px est assez étroit, et compte tenu de votre taille de la police, retour à la ligne n'est pas pour le faire. Certains mots sont juste long et ne peut pas être renvoyé. Vous pouvez réduire votre taille de la police de façon drastique ou aller avec overflow: scroll.mise à jour de votre CSS pour les éléments suivants: cela devrait résoudre