bootstrap responsive contenu de la table d'enrubannage
J'ai un code HTML semblable à ceci:
<div class="table-responsive">
<table class="table borderless">
<caption>
<h3>Announcements</h3>
</caption>
<tbody>
<tr >
<td>
If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc.
</td>
</tr>
</tbody>
</table>
</div>
Quand j'ai vue la sortie dans une petite vue port, la table est re-dimensionnée correctement, mais le paragraphe contenu dans les cellules du tableau sont pas d'enveloppe, de sorte barres de défilement sont affichés. J'ai attendu le comportement réactif aurait été pour envelopper le contenu du paragraphe. Comment puis-je y parvenir?
- Le comportement est le même, que j'ai mis le contenu à l'intérieur <p> ou pas
- Juste un coup d'oeil à cette question, il pourrait vous aider 🙂 stackoverflow.com/questions/12195469/...
Vous devez vous connecter pour publier un commentaire.
J'ai couru à travers le même problème que vous avez, mais les réponses ci-dessus n'a pas résolu mon problème. La seule façon que j'ai été en mesure de le résoudre - était de faire une classe et d'utiliser des largeurs de déclencher l'emballage pour mon cas d'utilisation spécifiques. Comme un exemple, j'ai fourni un extrait de code ci-dessous mais j'ai trouvé que vous aurez besoin de l'ajuster en fonction de la table en question - depuis que je l'utilise généralement plusieurs colspans selon la disposition. Le raisonnement je crois que Bootstrap est défaut est, car il enlève l'emballage des contraintes pour obtenir une table pour les barres de défilement. Le colspan doivent marcher jusqu'à.
J'espère que cette aide
tout simplement les utiliser comme ci-dessous et il sera de retour le long du texte dans un tableau . Pas besoin de rien d'autre
De sorte que vous pouvez utiliser les éléments suivants :
Si cela ne fonctionne pas:
.table-responsive
classe.Le comportement est le but:
Qui signifie que les tables sont sensibles par défaut (s'adaptent leur taille). Mais seulement si vous ne voulez pas casser votre tableau de lignes et ajouter de la barre de défilement quand il n'y a pas assez de place utiliser
.table-responsive
classe.Si vous jetez un oeil à bootstrap est source vous remarquerez qu'il y a des requêtes de média qui ne s'active que sur XS taille de l'écran, et le texte de la table à
white-space: nowrap
qui provoque pas de rupture.TL;DR; Solution
Simplement supprimer
.table-responsive
/élément de classe à partir de votre code html.MODIFIER
Je pense que la raison que votre table n'est pas sensible est que vous n'avez pas l'envelopper dans du
.container
,.row
et.col-md-x
classes comme celleAvec cela, vous pouvez toujours utiliser
<p>
balises et même le rendre réceptif.Veuillez voir le Bootply exemple ici
Bien alors. Vous pouvez utiliser les CSS retour automatique à la ligne de propriété. Quelque chose comme ceci :
La UberNeo réponse est Ok et je l'aime parce que vous n'avez pas à modifier quoi que ce soit d'autre, sauf les TD. Le seul point est que vous devez aussi ajouter le "white-space:normal" pour le style, afin de maintenir la réactivité des caractéristiques de la table, si ce n'est, à certaines résolutions de l'écharpe n'est pas faite et le défilement de la table ne s'affiche pas.
CSS:
HTML:
Ajouter votre nouvelle classe "tableresp" avec table responisve classe, puis ajouter le code ci-dessous dans votre fichier js