So legen Sie die Breite der Tabelle (Tabelle) in CSS fest

Beim Webseiten-Layoutdesign werden Tabellen häufig zum Anordnen von Daten verwendet. Bei der Verwendung von Tabellen müssen wir die Breite der Tabelle festlegen, um die Schönheit und Lesbarkeit der Seite sicherzustellen. Im Folgenden wird erläutert, wie Sie mithilfe von CSS die Breite einer Tabelle (Tabelle) festlegen.

1. Verwenden Sie das width-Attribut in CSS.

Es gibt ein width-Attribut in CSS, mit dem Sie die Breite eines Elements festlegen können. In der Tabelle können wir diese Eigenschaft auch verwenden, um die Breite der Tabelle festzulegen. Die spezifische Methode ist wie folgt:

1. Verwenden Sie im CSS-Stylesheet den Selektor „Tabelle“, um das Tabellenelement auszuwählen.
2. Verwenden Sie das Attribut „width“, um einen Breitenwert (kann Pixel oder Prozent sein) für die Tabelle anzugeben.

Zum Beispiel setzt der folgende Code die Breite der Tabelle auf 400 Pixel:

<table style="width: 400px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Im obigen Code setzen wir das „width“-Attribut des Tabellenelements auf „400px“, sodass die Breite der gesamten Tabelle entspricht ist auf 400 Pixel begrenzt. Auch wenn der Inhalt der Tabelle 400 Pixel überschreitet, wird die Tabelle nicht gestreckt und es werden Bildlaufleisten angezeigt.

Wenn wir das Breitenattribut auf einen Prozentwert setzen, ist die Breite der Tabelle proportional zur Breite des übergeordneten Elements. Der folgende Code legt beispielsweise die Breite der Tabelle auf 50 % der Breite des übergeordneten Elements fest:

<div>
  <table style="width: 50%;">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>

Im obigen Code setzen wir das Attribut „width“ des Tabellenelements auf „50 %“, sodass das Die Breite der Tabelle passt automatisch in die Tabelle. Die Breite des übergeordneten Elements hat einen besseren Responsive-Design-Effekt.

2. Verwenden Sie das Attribut „min-width“ und das Attribut „max-width“ in CSS.

Zusätzlich zur Verwendung des Attributs „width“ zum Festlegen der Tabellenbreite können wir zum Festlegen auch das Attribut „min-width“ und das Attribut „max-width“ verwenden die minimale Breite für die Tabelle und die maximale Breite. Die Verwendung dieser Eigenschaften ähnelt der der Eigenschaft width, Sie müssen lediglich den Namen der Eigenschaft entsprechend ändern.

Zum Beispiel können wir einen Mindestbreitenwert für die Tabelle festlegen, um zu verhindern, dass die Tabelle zu klein wird und das Layout beeinträchtigt. Hier ist ein Beispiel:

<table style="min-width: 200px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Im obigen Code setzen wir das „min-width“-Attribut des Tabellenelements auf „200px“, sodass die Breite der Tabelle nicht weniger als 200px beträgt, selbst wenn nur wenig Inhalt vorhanden ist der Tisch.

Ähnlich können wir auch einen maximalen Breitenwert für die Tabelle festlegen, um zu verhindern, dass die Tabelle zu groß wird und das Seitenlayout beeinträchtigt. Hier ist ein Beispiel:

<table style="max-width: 800px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Im obigen Code setzen wir das Attribut „max-width“ des Tabellenelements auf „800px“, sodass die Breite der Tabelle auch bei großem Inhalt in der Tabelle erhalten bleibt wird 800 Pixel nicht überschreiten.

Zusammenfassung:

Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, die Breite einer Tabelle (Tabelle) mithilfe von CSS festzulegen. In tatsächlichen Website-Anwendungen müssen wir entsprechend der tatsächlichen Situation eine geeignete Methode zur Breiteneinstellung auswählen, um den besten Seiteneffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite der Tabelle (Tabelle) in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!