Tabelle Spalte Größenanpassung
In Bootstrap 3
ich anwenden könnte col-sm-xx
zu den th
- tags in der thead
und ändern der Größe von Tabellenspalten wird. Allerdings funktioniert das nicht in der bootstrap-4. Wie kann ich etwas erreichen, wie dies in der bootstrap-4?
<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>
Blick auf die codeply, sofern es nicht die Größe richtig, vor allem, wenn Sie fügen Sie einige Daten in die Tabelle. Sehen, wie das läuft:
<div class="container" style="border: 1px solid black;">
<table class="table table-bordered">
<thead>
<tr class="row">
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
</tbody>
</table>
</div>
- als Nachtrag zu dieser Frage: wenn Sie schon lange Inhalte (wie die sehr langen URLs), um den Bildschirm des bootstrap 4 Tabellen sind nicht eine große Lösung, auch mit dem schlichten Antwort unten. entweder mit einer flex-Zeile oder Zeilen - /Spalten-Lösung tendenziell besser arbeiten mit überlauf-und text-wrap
Du musst angemeldet sein, um einen Kommentar abzugeben.
Aktualisiert 2018
Stellen Sie sicher, dass Ihre Tabelle enthält die
table
Klasse. Dies ist, weil Bootstrap 4 Tabellen sind "opt-in" so dietable
Klasse muss bewusst auf die Tabelle.http://codeply.com/go/zJLXypKZxL
Bootstrap 3.x hatte auch einige CSS-reset die Zellen der Tabelle, so dass Sie nicht schweben..
Ich weiß nicht, warum dies nicht ist, ist Bootstrap-4 alpha, aber es kann Hinzugefügt werden, zurück in die Finale Version. Das hinzufügen dieser CSS wird helfen, alle Spalten zu verwenden, die weiten Satz in die
thead
..Bootstrap-4 Alpha 2-Demo
UPDATE (wie von Bootstrap 4.0.0)
Nun, dass die Bootstrap-4 ist flexbox, die Zellen der Tabelle werden nicht davon ausgehen, die richtige Breite beim hinzufügen
col-*
. Eine Problemumgehung ist die Verwendung derd-inline-block
Klasse auf die Zellen der Tabelle zu verhindern, dass die Standard-display:flex-Spalten.Weitere option in BS4 ist die Verwendung der sizing utils-Klassen für die Breite...
Bootstrap-4 Alpha 6 Demo
Schließlich, Sie könnte verwenden
d-flex
auf die Tabellenzeilen (tr), und diecol-*
grid-Klassen für die Spalten (th,td)...Bootstrap 4.0.0 (stabil) Demo
Hinweis: eine Änderung der TR anzeigen:flex ändern können Sie die Grenzen
Andere Möglichkeit ist der Einsatz von flex-styling auf die Zeile in der Tabelle, und fügen Sie die
col-classes
auf die Kopfzeile der Tabelle /Tabelle-Daten-Elemente:Der Tabelle Spalte Größe der Klasse geändert wurde, von diesem
zu
Ich gehackt, das für die Veröffentlichung von Bootstrap 4.1.1 pro meine Bedürfnisse, bevor ich Sie sah @florian_korner post. Sieht sehr ähnlich aus.
Wenn Sie sass, so können Sie dieses snippet an das Ende des bootstrap enthält. Es scheint, das Problem zu beheben für chrome, IE und edge. Scheint nicht zu brechen, alles, was in firefox.
oder wenn Sie wollen einfach nur die kompilierte css-Dienstprogramm:
Kann ich dieses problem beheben, verwenden Sie den folgenden code mithilfe von Bootstrap 4:
Als Alpha-6 können Sie die folgenden sass-Datei: