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

75

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>
css html twitter-bootstrap twitter-bootstrap-3 Brendan Vogt
quelle
1
Sie können eine maximale Breite für die Spalte
festlegen
Ich dachte, in Bootstrap könnten Sie die <tr class='grid_2'><td></td><tr>Spaltenbreiten mithilfe von Optionen wie den folgenden angeben: Da Bootstrap auf einem 12-Spalten-Raster basiert, müssten Sie grid_6auf jede Zeile anwenden , vorausgesetzt, Sie möchten 100% Breite - Sie sollten in der Lage sein zu finden all diese Informationen in der Bootstrap-API
Alex

Antworten:

146

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.

Jordan.JD
quelle
1
@ user3362232 jetzt reparieren; danke für den Kommentar; Ich habe eine Situation mit unterschiedlich großen Säulen betont. Ich habe die Mathematik gegoogelt, um diesmal sicherzugehen.
Jordan.JD
1
Kein Zweifel, verstanden und vielleicht habe ich das verpasst ... Ich habe das nur gesagt, da ich glaube, dass die Standardeinstellung sein sollte, col-xs-..da dies immer von größeren Bildschirmen reagiert und vererbt wird. Während col-lg-..nur auf großen Bildschirmen funktioniert.
Dan
2
Was ist, wenn ich kein <th>Element in der Tabelle habe?
Mrudult
2
Habe dies gerade mit Bootstrap 4 getestet und es funktioniert nicht in Chrome und Opera.
JFloresI
1
@JFloresI, aktuelle Antwort ist für 3.2, wird bald mit einem v4-Abschnitt aktualisiert.
Jordan.JD
31

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.

Dan
quelle
2
Funktioniert sehr gut, wenn Sie sicherstellen müssen, dass die Spalten die gleiche Breite oder eine proportionale Breite haben. Es scheint auch, dass die Breiten in Prozent nicht zu 100% addiert werden müssen, so dass es auch für dynamische Tabellen problemlos funktioniert (zumindest für Chrome)
kashiraja