Wie kann ich die Breite von Tabellenspalten mithilfe von CSS festlegen, um ein bestimmtes Layout mit unterschiedlichen Prozentsätzen für jede Spalte zu erreichen?

Einstellen der Tabellenspaltenbreite

Dieses Tutorial bietet Anleitungen zum Festlegen der Breite von Tabellenspalten, um ein gewünschtes Layout zu erreichen. Betrachten Sie die folgende Tabelle als Posteingang:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

Das Ziel besteht darin, 15 % der Seitenbreite sowohl den Spalten „Von“ als auch „Datum“ zuzuweisen, während 70 % der Spalte „Betreff“ zugewiesen werden. Spalte. Darüber hinaus sollte sich die Tabelle über die gesamte Seitenbreite erstrecken.

Verwendung der CSS-Eigenschaft width

Um dieses Layout zu erreichen, kann die CSS-Eigenschaft width des col-Elements verwendet werden . Mit dieser Eigenschaft können Sie die Spaltenbreite in Pixeln oder als Prozentsatz der Breite des übergeordneten Elements angeben.

Betrachten Sie das folgende Beispiel mit Inline-Stilattributen:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;"></col>
       <col span="1" style="width: 70%;"></col>
       <col span="1" style="width: 15%;"></col>
    </colgroup>

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Durch die Angabe dieser Breiten wird die Die Tabelle nimmt die gesamte Seitenbreite ein und die Spalten werden entsprechend den angegebenen Prozentsätzen proportional dimensioniert. Dieser Ansatz ermöglicht flexible Spaltenbreiten, auch wenn sich die Seitenbreite ändert, und sorgt so für ein einheitliches Layout.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite von Tabellenspalten mithilfe von CSS festlegen, um ein bestimmtes Layout mit unterschiedlichen Prozentsätzen für jede Spalte zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!