CSS-Tabellengröße (Breite und Höhe)


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Tischbreite und -höhe

Die Breite und Höhe einer Tabelle werden durch die Eigenschaften width und height definiert.

Im folgenden Beispiel wird die Breite der Tabelle auf 100 % und die Höhe der Tabelle festgelegt <th> Elemente auf 70px:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Beispiel

table 
{
  width: 100%;
}

th
{
  height: 70px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>

<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>


Um eine Tabelle zu erstellen, die nur die halbe Seite umfassen sollte, verwenden Sie width: 50 %:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Beispiel

table 
{
  width: 50%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 50%;
}
</style>
</head>
<body>

<h2>A table that only span half the page</h2>

<p>Set the width of the table to 50%:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>