wake-up-neo.net

Festlegen der Größe einer Spalte in einer auf Bootstrap reagierenden Tabelle

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

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>
30
Brendan Vogt

Bootstrap 4.0

Beachten Sie alle Migration Änderungen von Bootstrap 3 nach 4. In der Tabelle müssen Sie nun Flexbox aktivieren, indem Sie die Klasse d-flex hinzufügen. Löschen Sie die Variable xs, damit Bootstrap den Viewport 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

Tabelle Spaltenbreite verwenden das gleiche Layout wie Grids do; mit col-[viewport]-[size]. Denken Sie daran, dass die Spaltengröße 12 betragen sollte. 1 + 3 + 3 + 5 = 12 in 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 festzulegen, damit die gesamte Spalte festgelegt wird. Hier ist ein funktionierender BOOTPLY .

Vielen Dank an @Dan, dass Sie mich daran erinnert haben, immer zuerst die mobile Ansicht (col-xs-*) zu verwenden.

77
Jordan.J.D

Sie können Inline-Stile verwenden und die Breite im <th>-Tag definieren. Machen Sie es so, 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

Normalerweise ist die Verwendung von Inline-Styles nicht ideal. Dies bietet jedoch Flexibilität, da Sie mit exakten Breiten sehr spezifisch und feinkörnig werden können.

17
Dan

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/

0
dev