Heim  >  Artikel  >  Web-Frontend  >  Wie ändere ich die Größe der Bootstrap 4-Tabellenspalten?

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

DDD
DDDOriginal
2024-10-30 05:57:28521Durchsuche

How do I resize Bootstrap 4 table columns?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn