Wie kann man die Spaltenbreite in HTML-Tabellenstrukturen mithilfe von CSS präzise steuern?

Spaltenbreite in Tabellenstrukturen festlegen

In verschiedenen Webentwicklungsszenarien ist es für eine optimale Darstellung erforderlich, die Breite von Tabellenspalten genau zu steuern. Betrachten wir die folgende einfache HTML-Tabelle, die als Posteingang verwendet wird:

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

Unser Ziel ist es, die Breite der Spalten „Von“ und „Datum“ auf 15 % der Seitenbreite festzulegen, während die Spalte „Betreff“ die restlichen 70 % einnimmt %. Darüber hinaus möchten wir, dass sich die Tabelle selbst über die gesamte Seitenbreite erstreckt.

Um dies zu beheben, können wir die CSS-Eigenschaft width im col-Element verwenden. Mit dieser Eigenschaft können wir die Breite einzelner Spalten in verschiedenen Einheiten angeben, einschließlich Pixeln oder Prozentsätzen.

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

    <!-- Table body and rows -->
</table></code>

In diesem Beispiel erstellen wir einen Satz von drei col-Elementen innerhalb eines colgroup-Containers. Jedes col-Element stellt eine Tabellenspalte dar und erhält mithilfe von Inline-CSS-Stilen die gewünschte Breite. Durch die Angabe von Prozentsätzen passen sich die Spaltenbreiten proportional an die gesamte Tabellenbreite an.

Das obige ist der detaillierte Inhalt vonWie kann man die Spaltenbreite in HTML-Tabellenstrukturen mithilfe von CSS präzise steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!