Wie definiere ich Tabellenspaltenbreiten mithilfe von HTML und CSS?

Tabellenspaltenbreite in HTML und CSS definieren

So legen Sie die Spaltenbreiten in der bereitgestellten Tabelle fest:

CSS-Breite-Eigenschaft:

Verwenden Sie die Breite-Eigenschaft innerhalb von CSS, um die Breite jeder Tabellenspalte zu definieren. Sie können Werte in Pixeln (px) oder als Prozentsatz (%) der Breite des übergeordneten Elements angeben.

Beispiel:

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

HTML-Markup :

<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>
  <!-- Insert table headers, body, and rows here -->
</table></code>

Diese Lösung weist den Spalten „Von“, „Betreff“ und „Datum“ jeweils Breiten von 15 %, 70 % und 15 % zu. Darüber hinaus wird sichergestellt, dass sich die Tabelle über die gesamte Seitenbreite erstreckt.

Das obige ist der detaillierte Inhalt vonWie definiere ich Tabellenspaltenbreiten mithilfe von HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!