web-dev-qa-db-fra.com

Comment définir la taille d'une colonne dans un tableau réactif Bootstrap

Comment définir la taille d'une colonne dans un tableau réactif Bootstrap? Je ne veux pas que la table perde ses fonctionnalités réactives. J'en ai besoin pour fonctionner dans IE8 également. J'ai inclus HTML5SHIV et répondez.

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>
htmlcsshtml5twitter-bootstraptwitter-bootstrap-3
30
Brendan Vogt

Bootstrap 4.0

Tenez compte de toutes les migration modifications de Bootstrap 3 à 4. Sur la table, vous devez maintenant activer flex box en ajoutant la classe d-flex, puis supprimez xs pour permettre à Bootstrap 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 utilise la même présentation que la grille do; en utilisant col-[viewport]-[size]. Rappelez-vous que les tailles de colonne doivent 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> pour définir la colonne entière. Voici un _ BOOTPLY en état de marche.

Merci à @Dan de m'avoir rappelé de toujours utiliser d'abord l'affichage mobile (col-xs-*).

77
Jordan.J.D

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

En règle générale, l’utilisation de styles en ligne n’est pas idéale, mais cela offre une certaine flexibilité car vous pouvez obtenir des largeurs précises et très spécifiques.

17
Dan

vous pouvez utiliser la classe Bootstrap suivante avec 

<tr class="w-25">

</tr>

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

0
dev