Comment afficher des tables sur mobile en utilisant Bootstrap?

Question

Mes tableaux s'affichent correctement sur ordinateur, mais une fois que j'essaie de voir la version mobile mon tableau finit par être trop large pour l'écran du dispositif mobile. J'utilise une mise en page responsive.

Comment puis-je définir les largeurs des tableaux pour la vue mobile? Quelles autres alternatives existent pour présenter des données tabulaires sur des vues mobiles en utilisant Bootstrap?

Answer 1

Bootstrap 3 introduce tableaux réactifs:

    ...

Bootstrap 4 est similaire, mais avec plus de contrôle via quelques nouvelles classes:

...réactif sur tous les écrans ... avec .table-responsive. Ou, choisissez un point de rupture maximal avec lequel avoir un tableau réactif en utilisant .table-responsive{-sm|-md|-lg|-xl}.

Crédit à Jason Bradley pour avoir fourni un exemple:

Answer 2

Vous pouvez également envisager d'essayer l'une de ces approches, car les grandes tables ne sont pas vraiment adaptées aux mobiles même si elles fonctionnent :

http://elvery.net/demo/responsive-tables/

Je suis plutôt fan de 'No More Tables' mais cela dépend évidemment de votre application.

Answer 3

Toutes les tables dans bootstrap s'étirent en fonction du conteneur dans lequel elles se trouvent. Vous pouvez mettre vos tables à l'intérieur d'un élément .span pour contrôler la taille. Cette question SO peut vous aider

Pourquoi les tables de Twitter Bootstrap ont-elles toujours une largeur de 100%?

Answer 4

Après avoir cherché pendant presque 1 mois, j'ai trouvé le code ci-dessous qui fonctionne très bien et parfaitement à 100% sur mon site web. Pour vérifier l'aperçu et voir comment cela fonctionne, vous pouvez consulter le lien. https://www.jobsedit.in/state-government-jobs/

et

https://www.jobsrob.in/category/central-government-jobs/

CODE CSS -----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Se comporter comme une "ligne" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:Blanc;
        text-indent: 50%; 
        text-align:gauche;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:centre;
}   
    .resp td:before  { 
        /* Maintenant comme un en-tête de tableau */
        position: absolute;
        /* Les valeurs de top/left imitent le rembourrage */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:gauche;
        white-space: nowrap;
        background-color:Blanc;
        font-weight:gras;
    }
    /*
    Étiquetez les données
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

CODE HTML --