Wie lege ich Spaltenbreiten in einer Tabelle für ein Layout im Posteingangsstil fest?

Festlegen der Tabellenspaltenbreite

Um eine optisch ansprechende und funktionale Tabelle zu erstellen, muss häufig die Breite ihrer Spalten angepasst werden. Bei einer einfachen Tabelle im Posteingangsstil besteht das Ziel darin, bestimmte Breiten für die Spalten „Von“, „Betreff“ und „Datum“ festzulegen, um sicherzustellen, dass sie unterschiedliche Prozentsätze der Seitenbreite einnehmen.

Um diese Anpassung zu erreichen, wird die CSS-width-Eigenschaft in Verbindung mit dem col-Element verwendet. Dieses Element befindet sich im Element colgroup, das das Spaltenlayout definiert. Indem wir jeder Spalte einen Breitenwert zuweisen, können wir ihre Größe steuern.

Hier ist ein Beispiel mit Inline-CSS-Attributen:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <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>

Dieses Codefragment legt die Tabelle so fest, dass sie die gesamte Seitenbreite einnimmt , während drei Spalten mit spezifischen Prozentsätzen definiert werden:

• "Von": 15 % der Seitenbreite
• "Betreff": 70 % der Seitenbreite
• „Datum“: 15 % der Seitenbreite

Das obige ist der detaillierte Inhalt vonWie lege ich Spaltenbreiten in einer Tabelle für ein Layout im Posteingangsstil fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!