Comment définir la taille d'une colonne dans une table réactive Bootstrap

Comment définissez-vous la taille d'une colonne dans une table réactive Bootstrap? Je ne veux pas que la table perde ses fonctionnalités de réponse. J'en ai besoin pour travailler dans IE8 aussi. J'ai inclus HTML5SHIV et répondre.

J'utilise 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>
24
demandé sur Brendan Vogt 2014-08-19 17:55:08

2 réponses

Bootstrap 4.0

Soyez conscient de tous les changements de migration de Bootstrap 3 à 4. Sur la table, vous devez maintenant activer Flex box en ajoutant la classe d-flex, et déposez le xs pour permettre à bootstrap de détecter automatiquement la fenêtre.

<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 Largeur de Colonne utiliser la même disposition que grilles do; En utilisant col-[viewport]-[size]. Rappelez-vous que la taille des colonnes devrait totaliser 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 définir les éléments <th> plutôt que les éléments <td> afin de définir la colonne entière. Voici un bootply fonctionnel .

Merci à @ Dan pour me rappeler de toujours travailler mobile view (col-xs-*) en premier.

63
répondu Jordan.J.D 2018-03-22 18:45:29

Vous pouvez utiliser des styles en ligne et définir la largeur dans la balise <th>. 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>

Démo Bootply

Généralement, l'utilisation de styles en ligne n'est pas idéale, mais cela offre une flexibilité car vous pouvez obtenir des largeurs précises et granulaires.

16
répondu Dan 2014-08-19 17:30:24