Heim > Artikel > Web-Frontend > Wie erreicht man eine Spaltengrößenänderung in Bootstrap 4-Tabellen?
Frage:
In Bootstrap 3 konnte man die Spaltenbreite von a ändern Tabellenkopfzeile durch Hinzufügen von col-sm-xx zu den Tags. Diese Funktionalität scheint in Bootstrap 4 zu fehlen. Wie kann man in Bootstrap 4 die Spaltengröße ändern?
Antwort:
Aktualisiert (2018)
Um einen erfolgreichen Betrieb sicherzustellen, stellen Sie sicher, dass die Tabelle die Tabellenklasse enthält. Bootstrap 4-Tabellen sind „opt-in“ und erfordern das explizite Hinzufügen der Tabellenklasse, um die Tabellenfunktionalität zu initiieren.
Bootstrap 3.x-Anpassung
In Bootstrap 3 .x wurde zusätzliches CSS verwendet, um den schwebenden Status von Tabellenzellen zu entfernen:
<code class="css">table td[class*=col-], table th[class*=col-] { position: static; display: table-cell; float: none; }</code>
Bootstrap 4 Alpha hat diese Anpassung weggelassen, obwohl ihre Aufnahme in die endgültige Version möglich ist. Durch die Hinzufügung würde sichergestellt, dass Tabellenzellen die im Tabellenkopf festgelegten Breiten berücksichtigen.
Update für Bootstrap 4 Alpha 2
Mit dem Übergang von Bootstrap 4 zur Flexbox werden Spaltenbreiten nicht automatisch vererbt aus dem Tabellenkopf. Um dies zu beheben, verwenden Sie die Klasse d-inline-block für Tabellenzellen und überschreiben Sie die Standardeinstellung display:flex von Spalten.
Zusätzliche Größenänderungsoptionen
A. Dimensionierung von Utility-Klassen (Bootstrap 4.0.0)
<code class="html"><thead> <tr> <th class="w-25">25</th> <th class="w-50">50</th> <th class="w-25">25</th> </tr> </thead></code>
b. Flexbox- und Spaltenrasterklassen
<code class="html"><table class="table table-bordered"> <thead> <tr class="d-flex"> <th class="col-3">25%</th> <th class="col-3">25%</th> <th class="col-6">50%</th> </tr> </thead> <tbody> <tr class="d-flex"> <td class="col-sm-3">..</td> <td class="col-sm-3">..</td> <td class="col-sm-6">..</td> </tr> </tbody> </table></code>
Hinweis: Das Anwenden von display:flex auf Tabellenzeilen kann sich auf die Randanzeige auswirken.
Das obige ist der detaillierte Inhalt vonWie erreicht man eine Spaltengrößenänderung in Bootstrap 4-Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!