Wie kann ich dafür sorgen, dass eine Tabellenspalte den gesamten horizontalen Freiraum ausfüllt?

Lesezeit: 3 Minuten

Benutzer-Avatar
gsteinert

Ich habe eine HTML-Tabelle, die aus 3 Spalten besteht. Es hat eine feste Breite von 600px.

<table>
  <tr>
    <td>Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

Ich möchte, dass die Spalten Menge und Aktionen so klein wie möglich sind (der Inhalt auf einer Zeile bleibt) und die Spalte Name den Rest des verfügbaren Platzes einnimmt. Die Größe der Spalte „Menge“ und „Aktionen“ ändert sich je nach Inhalt/Schriftgröße, sodass feste Breiten in diesem Fall nicht funktionieren.

Gibt es eine Möglichkeit, dies in HTML/CSS zu tun? Oder muss ich dafür das Javascript ausbrechen?

  • hast du es mal mit nowrap versucht? w3schools.com/tags/att_td_nowrap.asp . Beachten Sie, dass das Attribut veraltet ist und wie dort angegeben mit CSS verwendet werden sollte

    – Eran Zimmermann Gonen

    21. August 2011 um 13:51 Uhr


  • Dies löst nicht mein Hauptproblem, nämlich dass die anderen beiden Zellen zu breit und nicht zu schmal waren. Aber zusammen mit Rantas Antwort ist es genau das, wonach ich suche, danke

    – gsteinert

    21. August 2011 um 14:01 Uhr

Benutzer-Avatar
Ranta

Sie können width=”99%” auf diese Spalte anwenden. Zum Beispiel:

<table> 
  <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
  </tr> 
</table> 

  • Das funktioniert super, solange ich nowrap auf den anderen Zellen verwende. Ich komme mir ein bisschen blöd vor, dass ich jetzt nicht daran denke. Vielen Dank

    – gsteinert

    21. August 2011 um 14:00 Uhr

  • das width-Attribut ist ebenfalls veraltet, und stattdessen sollte css verwendet werden: w3schools.com/tags/att_td_width.asp

    – Eran Zimmermann Gonen

    21. August 2011 um 14:05 Uhr

  • Funktioniert gut im Firefox. In Webkit-Browsern werden dadurch Bilder gequetscht, deren Breite nicht explizit festgelegt ist.

    – Arcolye

    4. Dezember 2012 um 9:17 Uhr

  • Du bist ein Genie. Das machte mich wahnsinnig.

    – AndrewLeonardi

    26. August 2016 um 16:56 Uhr

  • Beachten Sie, dass dies nicht mit dem Tabellenlayout funktioniert: behoben. Bei einem festen Tabellenlayout erhält die Spalte tatsächlich 100% der Breite.

    – xr280xr

    3. Februar 2017 um 22:37 Uhr

Sie können max-width:99% verwenden; in der ersten Spalte und geben Sie feste Größen in den anderen Spalten an (ich habe Spalten in Pixelgröße verwendet).

<table style="width: 100%;">
  <tr>
    <td style="max-width: 99%">
      Will max
    </td>
    <td style="width:110px;"> 
      fixed size here
    </td>
  </tr>
</table>

Für jede Spalte, die Sie die Mindestbreite haben möchten: (1) setzen Sie die CSS-Breite auf Null und (2) verwenden Sie white-space: nowrap um zu verhindern, dass der Text auf mehrere Zeilen umbricht.

table {
  width: 100%;
}

:where(th, td):not(.max) {
  width: 0;
  white-space: nowrap;
}

/* For demo purposes */
table, th, td {
  border: 1px solid gray;
}
<table>
  <tr>
    <th class="max">Name</th>
    <th>Qty</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td class="max">Victoria Adelaide Mary Louisa</td>
    <td>233,546,443</td>
    <td>Abort Retry Fail</td>
  </tr>
</table>

1228660cookie-checkWie kann ich dafür sorgen, dass eine Tabellenspalte den gesamten horizontalen Freiraum ausfüllt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy