web-dev-qa-db-fra.com

bootstrap responsive wrapping contenu du tableau

J'ai HTML similaire à 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>

Lorsque je visualise la sortie dans un petit port de vue, le tableau est redimensionné correctement, mais le contenu des paragraphes dans les cellules du tableau n'est pas encapsulé. Les barres de défilement sont donc affichées. Je pensais que le comportement réactif aurait consisté à envelopper le contenu du paragraphe. Comment est-ce que je réalise ceci? 

twitter-bootstrapresponsive-designtwitter-bootstrap-3html-table
24
prmph

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 pour moi de résoudre ce problème était de créer une classe et d'utiliser des largeurs spécifiques pour déclencher le retour à la ligne pour mon cas d'utilisation spécifique. À titre d'exemple, j'ai fourni un extrait ci-dessous - mais j'ai constaté que vous devrez l'ajuster pour le tableau en question - car j'utilise généralement plusieurs colspans selon la disposition. J’estime que Bootstrap échoue 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 ça aide

15
Dave Friedel

utilisez simplement comme ci-dessous et Word encapsulera tout texte long dans un tableau. Pas besoin de rien d'autre

<td style="Word-wrap: break-Word;min-width: 160px;max-width: 160px;">long long comments</td>
28
UberNeo

Le comportement est intentionnel:

Créez des tables réactives en enveloppant les tables .table dans pour les faire défiler horizontalement sur de petits périphériques (moins de 768 pixels). Lorsque vous visualisez sur une largeur supérieure à 768px, vous ne verrez aucune différence entre ces tableaux.

Ce qui signifie que les tables sont réactives par défaut (ajustent leur taille). Mais uniquement si vous souhaitez ne pas rompre les lignes de votre table et ajouter une barre de défilement lorsqu'il n'y a pas assez de place, utilisez la classe .table-responsive.

Si vous jetez un coup d'œil à la source de bootstrap , vous remarquerez qu'une requête multimédia n'est activée que sur la taille d'écran XS et définit le texte de la table sur white-space: nowrap, ce qui empêche sa rupture.

TL; DR; Solution

Supprimez simplement .table-responsive element/class de votre code HTML.

15
Buksy

Vous pouvez donc utiliser les éléments suivants:

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;
}
15
user2195058

MODIFIER

Je pense que la raison pour laquelle votre table ne répond pas au début est que vous n’avez pas intégré les classes .container, .row et .col-md-x comme celle-ci

<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 les balises <p> et même les rendre réactives.

S'il vous plaît voir l'exemple Bootply ici

9
lozadaOmr

Bien alors. Vous pouvez utiliser la propriété CSS Word wrap. Quelque chose comme ça :

td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
Word-wrap:break-Word;
}
4
Manish Kumar

La réponse UberNeo est Ok et je l’aime bien car vous n’avez pas à modifier autre chose que le TD. Le seul problème est que vous devez également ajouter "white-space: normal" au style afin de conserver les caractéristiques de réponse de la table. Sinon, à certaines résolutions, le retour à la ligne n'est pas effectué et le défilement du tableau apparaître.

style="Word-wrap: break-Word;min-width: 160px;max-width: 160px;white-space:normal;"
4
JavocSoft

.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
Keith Chiah

Ajoutez votre nouvelle classe "tables" avec la classe qui répond à la table puis ajoutez le code ci-dessous dans votre fichier js

$(".tableresp").on('click', '.dropdown-toggle', function(event) {

    if ($('.dropdown-menu').length) {
        var Elm = $('.dropdown-menu'),
            docHeight = $(document).height(),
            docWidth = $(document).width(),
            btn_offset = $(this).offset(),
            btn_width = $(this).outerWidth(),
            btn_height = $(this).outerHeight(),
            Elm_width = Elm.outerWidth(),
            Elm_height = Elm.outerHeight(),
            table_offset = $(".tableresp").offset(),
            table_width = $(".tableresp").width(),
            table_height = $(".tableresp").height(),

            tableoffright = table_width + table_offset.left,
            tableoffbottom = table_height + table_offset.top,
            rem_tablewidth = docWidth - tableoffright,
            rem_tableheight = docHeight - tableoffbottom,
            Elm_offsetleft = btn_offset.left,
            Elm_offsetright = btn_offset.left + btn_width,
            Elm_offsettop = btn_offset.top + btn_height,
            btn_offsetbottom = Elm_offsettop,

            left_Edge = (Elm_offsetleft - table_offset.left) < Elm_width,
            top_Edge = btn_offset.top < Elm_height,
            right_Edge = (table_width - Elm_offsetleft) < Elm_width,
            bottom_Edge = (tableoffbottom - btn_offsetbottom) < Elm_height;

        console.log(tableoffbottom);
        console.log(btn_offsetbottom);
        console.log(bottom_Edge);
        console.log((tableoffbottom - btn_offsetbottom) + "|| " + Elm_height);


        var table_offset_bottom = docHeight - (table_offset.top + table_height);

        var touchTableBottom = (btn_offset.top + btn_height + (Elm_height * 2)) - table_offset.top;

        var bottomedge = touchTableBottom > table_offset_bottom;

        if (left_Edge) {
            $(this).addClass('left-Edge');
        } else {
            $('.dropdown-menu').removeClass('left-Edge');
        }
        if (bottom_Edge) {
            $(this).parent().addClass('dropup');
        } else {
            $(this).parent().removeClass('dropup');
        }

    }
});
var table_smallheight = $('.tableresp'),
    positioning = table_smallheight.parent();

if (table_smallheight.height() < 320) {
    positioning.addClass('positioning');
    $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static');

} else {
    positioning.removeClass('positioning');
    $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative');

}
0
Vishal Sharma