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?

20
demandé sur lozadaOmr 2014-02-06 00:28:55

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

12
répondu Dave Friedel 2014-05-01 19:45:06

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>
25
répondu UberNeo 2014-08-01 15:15:15

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.

14
répondu Buksy 2016-06-23 09:20:11

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;
}
13
répondu user2195058 2016-03-22 15:06:31

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

9
répondu lozadaOmr 2014-08-11 08:15:12

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;
}
4
répondu Manish Kumar 2014-02-06 08:32:29

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;"
4
répondu JavocSoft 2014-11-13 10:25:49

.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>
2
répondu Keith Chiah 2015-07-22 10:43:16