Wie ändere ich die Größe von Tabellenspalten in Bootstrap 4?

Tabellenspaltengröße in Bootstrap 4

Anfängliches Problem:

In Bootstrap 3 unter Verwendung von col-sm-xx Klasse für Tabellenkopfelemente (TH) ermöglichte eine einfache Größenänderung von Spalten. Dies funktioniert jedoch in Bootstrap 4 nicht mehr. Dieser Artikel bietet Lösungen zum Erreichen einer ähnlichen Funktionalität.

Lösung 1: Tabellenklasse sicherstellen

Überprüfen Sie, ob Ihre Tabelle über die Tabelle verfügt Klasse angewendet. Bootstrap 4-Tabellen sind „opt-in“, was bedeutet, dass diese Klasse hinzugefügt werden muss, um das gewünschte Verhalten zu aktivieren.

Lösung 2: CSS-Reset verwenden

Um eine ordnungsgemäße Anzeige sicherzustellen der Spaltenbreiten fügen Sie das folgende CSS hinzu:

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

Lösung 3: Inline-Blockklasse

Um zu verhindern, dass die Spalten falsche Breiten annehmen, wenden Sie d-inline an -Blockklasse für die Tabellenzellen.

Lösung 4: Größenanpassung von Dienstprogrammklassen

Bootstrap 4 enthält Größenanpassungsdienstprogrammklassen, die zum Festlegen von Spaltenbreiten verwendet werden können:

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

Lösung 5: Flexbox

Für mehr Flexibilität sollten Sie die Verwendung von Flexbox für Tabellenzeilen und Rasterklassen für Spalten in Betracht ziehen:

<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 von Tabellenspalten in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!