Wie ändere ich die Größe der Bootstrap 4-Tabellenspalten?

Größenänderung von Bootstrap 4-Tabellenspalten

Bootstrap 3 ermöglichte die Größenänderung von Tabellenspalten mithilfe der Klasse col-sm-xx in den Tags im Kopf. Diese Methode ist jedoch in Bootstrap 4 nicht effektiv.

Aktualisierter Ansatz

Schritt 1: Stellen Sie sicher, dass die Klasse „table“ auf dem Tisch steht

Bootstrap 4-Tabellen sind „opt-in“, was bedeutet, dass die Tabellenklasse explizit zum Tabellenelement hinzugefügt werden muss.

Schritt 2: CSS für die Inline-Blockanzeige hinzufügen

Bootstrap 3 enthielt zuvor CSS, um Tabellenzellenpositionen zurückzusetzen und Floating zu verhindern. Dieses CSS fehlt in Bootstrap 4 Alpha, aber Sie können es hinzufügen:

<code class="css">table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}</code>

Schritt 3: Größenanpassungs-Dienstprogrammklassen verwenden (Bootstrap 4.0.0 und höher)

Alternativ können Sie in Bootstrap 4.0.0 und höher die w-*-Dienstprogrammklassen für die Breite verwenden:

<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>

Schritt 4: Flexbox verwenden (Bootstrap 4.0.0 und höher)

Eine weitere Option ist die Verwendung von d-flex für tr-Zeilen und Rasterklassen wie col-* für Spalten:

<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>

Das obige ist der detaillierte Inhalt vonWie ändere ich die Größe der Bootstrap 4-Tabellenspalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!