Comment définir la taille d'une colonne dans un Bootstrap responsive table

Comment pouvez-vous définir la taille d'une colonne dans un Bootstrap responsive table? Je ne veux pas la table de perdre sa reponsive fonctionnalités. J'en ai besoin pour travailler dans IE8 ainsi. J'ai inclus HTML5SHIV et d'y Répondre.

Je suis en utilisant Bootstrap 3 (3.2.0)

<div class="table-responsive">
    <table id="productSizes" class="table">
        <thead>
            <tr>
                <th>Size</th>
                <th>Bust</th>
                <th>Waist</th>
                <th>Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>6</td>
                <td>79 - 81</td>
                <td>61 - 63</td>
                <td>89 - 91</td>
            </tr>
            <tr>
                <td>8</td>
                <td>84 - 86</td>
                <td>66 - 68</td>
                <td>94 - 96</td>
            </tr>
        </tbody>
    </table>
</div>
  • Vous pouvez définir un max-width de la colonne
  • Je pensais que dans le bootstrap, vous pouvez spécifier les largeurs de colonnes à l'aide d'options telles que : <tr class='grid_2'><td></td><tr>, vu que bootstrap est basé sur un 12 colonne de la grille souple, vous devez faire une demande grid_6 pour chaque ligne en supposant que vous voulez 100% de largeur, vous devriez être capable de trouver tout ce que l'info dans le bootstrap de l'API
InformationsquelleAutor Brendan Vogt | 2014-08-19
  1. 88

    Bootstrap 4.0

    Être au courant de toutes la migration changements de Bootstrap 3 à 4. Sur la table, vous devez maintenant activer flex zone par l'ajout de la classe d-flex, et de la baisse de la xs pour permettre l'amorçage de détecter automatiquement la fenêtre d'affichage.

    <div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

    bootply

    Bootstrap 3.2

    Table la largeur de la colonne d'utiliser la même mise en page que grilles faire; à l'aide de col-[viewport]-[size]. Rappelez-vous la taille des colonnes devraient total 12; 1 + 3 + 3 + 5 = 12 dans cet exemple.

            <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

    N'oubliez pas de régler le <th> éléments plutôt que de les <td> éléments de sorte qu'il définit l'ensemble de la colonne. Ici, c'est un travail BOOTPLY.

    Grâce à @Dan pour me rappeler de toujours travailler de la vue mobile (col-xs-*) en premier.

    • Votre réseau doit ajouter jusqu'à un total de 12, pas jusqu'à 12 pour le premier devrait aussi être de 3
    • la fixation de maintenant; merci pour le commentaire; j'étais en mettant l'accent sur la situation avec différentes tailles de colonnes. j'ai googlé le calcul pour s'assurer que ce temps.
    • 1 + 3 + 3 + 5 = 12, correct.
    • Aussi, vous devriez probablement utiliser quelque chose de plus faible que col-lg depuis cela ne s'applique pas sur les grands écrans
    • J'ai déjà indiqué que vous pouvez modifier la fenêtre d'affichage. J'ai utilisé lg comme un exemple.
    • Sans aucun doute, il a obtenu et peut-être que j'ai manqué...je voulais juste dire que depuis, je crois, la valeur par défaut doit être col-xs-.. depuis toujours sensible et héritées par les plus grands écrans. Alors que col-lg-.. ne fonctionne que sur de grands écrans.
    • premier mobile; j'ai besoin de garder cela dans mon esprit, le plus souvent merci. J'ai fait la modification.
    • Que faire si je n'ai pas de <th> élément dans le tableau?
    • Juste testé avec Bootstrap 4 et il ne fonctionne pas sur Chrome et Opera.
    • réponse actuelle est de 3.2, sera mise à jour avec une v4 article bientôt.
    • Salut, pouvez-vous payer une visite à ma question légèrement liée à ce <stackoverflow.com/questions/50694872/...>
    • serais-je raison de supposer que les tailles de colonne doit ajouter jusqu'à un multiple de 12? J'ai parfois plus de 12 colonnes dans un tableau particulier, ce serait donc être ok résumant à 24 au lieu de 12?
    • non, 12 colonnes, la largeur maximale. 24 colonnes seront en 2 lignes. mais il ne sera probablement force dans une ligne aboutissant à côté de défilement de la page.

    InformationsquelleAutor Jordan.J.D
  2. 16

    Vous pouvez utiliser des styles en ligne et de définir la largeur de la <th> tag. Faire en sorte que la somme des largeurs = 100%.

        <tr>
        <th style="width:10%">Size</th>
        <th style="width:30%">Bust</th>
        <th style="width:50%">Waist</th>
        <th style="width:10%">Hips</th>
    </tr>

    Bootply démo

    Généralement en utilisant des styles en ligne n'est pas l'idéal, mais ce n'est apporter de la souplesse parce que vous pouvez obtenir de très spécifique et granulaire avec exact de largeurs.

    • Fonctionne vraiment bien si vous avez besoin pour vous assurer que les colonnes sont de la même largeur ou d'une sorte de proportionnelle à la largeur. Il semble également que les largeurs en % n'avez pas besoin d'ajouter jusqu'à 100% donc il fonctionne pour les tableaux dynamiques facilement aussi (au moins pour Chrome)
    InformationsquelleAutor Dan
  3. 0

    vous pouvez utiliser la classe de Bootstrap avec 

    <tr class="w-25">

</tr>

    pour plus de détails, consultez la page suivante
    https://getbootstrap.com/docs/4.1/utilities/sizing/

    • donner le plus d'informations à propos de votre problème.
    InformationsquelleAutor dev