Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich Spaltenbreiten in einer Tabelle für ein Layout im Posteingangsstil fest?

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

DDD
DDDOriginal
2024-10-30 01:54:02227Durchsuche

How to Set Column Widths in a Table for an Inbox-Style Layout?

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!

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