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 je vois la sortie dans un petit port de vue, la table est re-dimensionnée correctement, mais le contenu du paragraphe dans les cellules de la table ne sont pas enveloppés, donc des barres de défilement sont montrés. J'ai attendu le comportement réactif aurait été pour envelopper le contenu du paragraphe. Comment puis-je y parvenir?
8 réponses
j'ai rencontré le même problème que vous, mais les réponses ci-dessus n'ont pas résolu mon problème. La seule façon que j'ai pu la résoudre - était de faire une classe et d'utiliser des largeurs spécifiques pour déclencher l'enrubannage pour mon cas d'utilisation spécifique. Par exemple, j'ai fourni un extrait ci - dessous - mais j'ai trouvé que vous devrez l'ajuster pour la table en question-car j'utilise généralement plusieurs colspans en fonction de la mise en page. Le raisonnement que je crois Bootstrap échoue - est parce qu'il supprime les contraintes d'emballage pour obtenir un tableau complet pour les barres de défilement. Le colspan doit le faire trébucher.
<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
.specifictd {
width:360px; /* adjust to desired wrapping */
display:table;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}
j'espère que cela aide
il suffit d'utiliser comme ci-dessous et il sera mot envelopper n'importe quel long texte dans une table . Pas besoin d'autre chose
<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td>
le comportement est intentionnel:
créer des tables responsive en les enveloppant .table en .table-sensible pour faire défiler horizontalement sur de petits appareils (moins de 768px). Lorsque vous regardez sur quelque chose de plus grand que 768px large, vous ne verrez aucune différence dans ces tableaux.
ce qui signifie que les tables sont responsive par défaut (ajustant leur taille). Mais seulement si vous souhaitez ne pas briser les lignes de votre table et ajouter scrollbar quand il ya pas assez de place utiliser .table-responsive classe.
Si vous prenez un coup d'oeil à bootstrap source vous remarquerez qu'il y a media query qui ne s'active que sur XS la taille de l'écran et il place le texte du tableau à white-space: nowrap ce qui fait qu'il ne se casse pas.
TL;DR; Solution
il suffit de supprimer .table-responsive/élément de classe à partir de votre code html.
de Sorte que vous pouvez utiliser le code suivant :
td {
white-space: normal !important; // To consider whitespace.
}
Si cela ne fonctionne pas:
td {
white-space: normal !important;
word-wrap: break-word;
}
table {
table-layout: fixed;
}
EDIT
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 celle
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- or use any other number .col-md- -->
<div class="table-responsive">
<div class="table">
</div>
</div>
</div>
</div>
</div>
Avec cela, vous pouvez toujours utiliser <p> balises et même le rendre réceptif.
s'il vous Plaît voir la Bootply exemple ici
très bien alors. Vous pouvez utiliser la propriété CSS word wrap. Quelque chose comme ceci :
td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
word-wrap:break-word;
}
la réponse UberNeo est Ok et je l'aime parce que vous n'avez pas à modifier autre chose que le TD. Le seul point est que vous devez également ajouter "blanc-espace:normal" au style afin de maintenir les caractéristiques de réponse de la table, sinon, à certaines résolutions l'enveloppe n'est pas faite et le rouleau de la table n'apparaît pas.
style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;"
.table td.abbreviation {
max-width: 30px;
}
.table td.abbreviation p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<table class="table">
<tr>
<td class="abbreviation"><p>ABC DEF</p></td>
</tr>
</table>