So legen Sie die Größe einer Spalte in einer auf Bootstrap reagierenden Tabelle fest

Wie legen Sie die Größe einer Spalte in einer auf Bootstrap reagierenden Tabelle fest? Ich möchte nicht, dass der Tisch seine Antwortfunktionen verliert. Ich brauche es, um auch in IE8 zu funktionieren. Ich habe HTML5SHIV und Respond aufgenommen.

Ich verwende 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>

Bootstrap 4.0

Beachten Sie alle Migrationsänderungen von Bootstrap 3 zu 4. In der Tabelle müssen Sie jetzt die Flexbox aktivieren, indem Sie die Klasse hinzufügen d-flex, und die xsOption löschen, damit Bootstrap das Ansichtsfenster automatisch erkennt.

<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

Die Tabellenspaltenbreite verwendet dasselbe Layout wie die Raster . mit col-[viewport]-[size]. Denken Sie daran, dass die Spaltengrößen 12 betragen sollten. 1 + 3 + 3 + 5 = 12in diesem Beispiel.

        <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>

Denken Sie daran, die <th>Elemente anstelle der <td>Elemente so festzulegen, dass die gesamte Spalte festgelegt wird. Hier ist eine funktionierende BOOTPLY .

Vielen Dank an @Dan, der mich daran erinnert hat, immer zuerst mit mobile view ( col-xs-*) zu arbeiten.

Sie können Inline-Stile verwenden und die Breite im <th>Tag definieren. Stellen Sie sicher, dass die Summe der Breiten = 100% ist.

    <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-Demo

In der Regel ist die Verwendung von Inline-Stilen nicht ideal. Dies bietet jedoch Flexibilität, da Sie sehr genau und detailliert mit exakten Breiten arbeiten können.

Sie können die folgende Bootstrap-Klasse mit verwenden

<tr class="w-25">

</tr>

Weitere Informationen finden Sie auf der folgenden Seite: https://getbootstrap.com/docs/4.1/utilities/sizing/