Wie erreicht man eine Spaltengrößenänderung in Bootstrap 4-Tabellen?

Tabellenspaltengröße in Bootstrap 4

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!