In Bootstrap 3
könnte ich col-sm-xx
nach Belieben auf die th
Tags in den thead
Tabellenspalten anwenden und deren Größe ändern. Dies funktioniert jedoch nicht in Bootstrap 4. Wie kann ich so etwas in Bootstrap 4 erreichen?
<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>
Wenn Sie sich den Codeply ansehen, wird er nicht richtig dimensioniert, insbesondere wenn Sie der Tabelle einige Daten hinzufügen. Sehen Sie, 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>
css
twitter-bootstrap
html-table
bootstrap-4
Killerpixler
quelle
quelle
Antworten:
Aktualisiert 2018
Stellen Sie sicher, dass Ihre Tabelle die
table
Klasse enthält. Dies liegt daran, dass Bootstrap 4-Tabellen "opt-in" sind, sodass dietable
Klasse absichtlich zur Tabelle hinzugefügt werden muss.http://codeply.com/go/zJLXypKZxL
Bootstrap 3.x hatte auch etwas CSS, um die Tabellenzellen zurückzusetzen, damit sie nicht schweben.
Ich weiß nicht, warum dies nicht Bootstrap 4 Alpha ist, aber es kann in der endgültigen Version wieder hinzugefügt werden. Durch Hinzufügen dieses CSS können alle Spalten die im
thead
.. festgelegten Breiten verwenden .Bootstrap 4 Alpha 2 Demo
UPDATE (ab Bootstrap 4.0.0)
Da Bootstrap 4 nun Flexbox ist, nehmen die Tabellenzellen beim Hinzufügen nicht die richtige Breite an
col-*
. Eine Problemumgehung besteht darin, died-inline-block
Klasse in den Tabellenzellen zu verwenden, um die Standardanzeige zu verhindern: Flex von Spalten.Eine weitere Option in BS4 ist die Verwendung der Sizing Utils-Klassen für die Breite ...
Bootstrap 4 Alpha 6 Demo
Zuletzt können Sie
d-flex
die Tabellenzeilen (tr) und diecol-*
Rasterklassen in den Spalten (th, td) verwenden ...Bootstrap 4.0.0 (stabil) Demo
Hinweis: Ändern des anzuzeigenden TR: Flex kann die Ränder ändern
quelle
w-25
,w-50
undw-75
Klassen arbeiten mit Bootstrap 4. Dank!Eine weitere Option besteht darin, das Flex-Styling auf die Tabellenzeile anzuwenden und die
col-classes
Elemente der Tabellenüberschrift / Tabellendaten hinzuzufügen :quelle
vertical-align: middle
nicht mehr mitd-flex
Klasse.align-items: baseline
. Um mehr über Flexbox zu erfahren, lesen Sie diese AnleitungDie Verwendung von
d-flex
class funktioniert gut, aber einige andere Attribute funktionieren nicht mehr wievertical-align: middle
Eigenschaft.Der beste Weg, Spalten sehr einfach zu dimensionieren, besteht darin, das
width
Attribut mit Prozentsatz nur inthead
Zellen zu verwenden.quelle
Ich habe dies für die Veröffentlichung von Bootstrap 4.1.1 gemäß meinen Anforderungen gehackt, bevor ich den Beitrag von @ florian_korner gesehen habe. Sieht sehr ähnlich aus.
Wenn Sie sass verwenden, können Sie dieses Snippet am Ende Ihrer Bootstrap-Includes einfügen. Es scheint das Problem für Chrome, IE und Edge zu beheben. Scheint nichts in Firefox zu brechen.
oder wenn Sie nur das kompilierte CSS-Dienstprogramm möchten:
quelle
Haftungsausschluss: Diese Antwort ist möglicherweise etwas alt. Seit dem Bootstrap 4 Beta. Bootstrap hat sich seitdem geändert.
Die Tabellenspaltengrößenklasse wurde hiervon geändert
zu
quelle
Ich kann dieses Problem mit dem folgenden Code mithilfe von Bootstrap 4 beheben:
quelle
Ab Alpha 6 können Sie die folgende Sass-Datei erstellen:
quelle