Stellen Sie die Spaltenbreite der Tabelle unabhängig von der Textmenge in den Zellen konstant ein?

Lesezeit: 6 Minuten

Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
Mischa Moroschko

In meiner Tabelle setze ich die Breite der ersten Zelle in einer Spalte auf sein 100px.
Wenn der Text in einer der Zellen in dieser Spalte jedoch zu lang ist, wird die Breite der Spalte größer als 100px. Wie kann ich diese Erweiterung deaktivieren?

  • stackoverflow.com/questions/1258416/word-wrap-in-a-html-table könnte Ihnen dabei helfen, in die richtige Richtung zu weisen

    – justinl

    16. Dezember 2010 um 4:49 Uhr

  • In meinem Fall ist keine Dehnung aufgetreten, sondern das Gegenteil: unerwünschtes Schrumpfen der Breite trotz meiner expliziten Breitenangabe. Lächerlich!

    – Csaba Toth

    28. Juli 2014 um 5:49 Uhr

  • Die einzig richtige Lösung dafür besteht darin, colgroup mit cols darin zu verwenden und die Spaltenbreite festzulegen.

    – Mächtiges Schweinefleisch

    18. März 2015 um 19:46 Uhr

  • table-layout:fixed; ist die Lösung

    – emfi

    29. August 2015 um 18:48 Uhr

  • @emfi du bist mein neuer Gott. Es klappt!

    – Benutzer3035649

    9. Juni 2021 um 17:27 Uhr

1646169729 196 Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
ptpaterson

Ich habe ein bisschen damit gespielt, weil ich Schwierigkeiten hatte, es herauszufinden.

Sie müssen die Zellenbreite festlegen (entweder th oder td funktionierte, ich habe beide eingestellt) UND die eingestellt table-layout zu fixed. Aus irgendeinem Grund scheint die Zellenbreite nur dann konstant zu bleiben, wenn auch die Tabellenbreite festgelegt ist (ich denke, das ist albern, aber was auch immer).

Außerdem ist es nützlich, die einzustellen overflow Eigentum zu hidden um zu verhindern, dass zusätzlicher Text aus der Tabelle kommt.

Sie sollten darauf achten, auch alle Begrenzungen und Größen für CSS zu belassen.

Ok also hier ist was ich habe:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Hier ist es in JSFiddle

Dieser Typ hatte ein ähnliches Problem: Tabellenzellenbreiten – Breite fixieren, lange Wörter umbrechen/abschneiden

  • Es ist wichtig, Folgendes zu beachten: “Der Browser legt dann die Spaltenbreite basierend auf der Breite der Zellen in der ersten Zeile der Tabelle fest”, von stackoverflow.com/questions/570154/…

    – Daniloquio

    9. Februar 2012 um 19:31 Uhr


  • Es funktioniert, wenn die Tabellenbreite nicht festgelegt ist. jsfiddle.net/lavinski/CGCFW/3 Sie brauchen nur eine dynamische Zeile, um den verbleibenden Platz einzunehmen.

    – Daniel Klein

    13. Dezember 2012 um 2:58 Uhr

  • @DanielLittle alternativ können Sie die Tabellenbreite auf 1px setzen; mit overflow: visible Bei Tabellen mit dynamischer Größe spielt es keine Rolle, ob die Größe der Tabelle selbst größer oder kleiner als die tatsächlichen Zellen ist, solange die Größe der Zellen festgelegt und der Überlauf sichtbar ist.

    – Mahn

    28. Juli 2015 um 17:12 Uhr

  • Was könnten Sie tun, wenn Ihr td “width=30%;” hat?

    – 71GA

    6. Dezember 2015 um 19:30 Uhr

  • Wenn der Tisch eine hat widthsogar mit table-layout: fixed Die Spaltenbreite wird nicht festgelegt, da einige Spalten vergrößert werden, um die Tabellenbreite auszufüllen, wenn die Summe aller Spaltenbreiten kleiner als die Tabellenbreite ist. Um dies zu vermeiden, benötigen Sie die Antwort von @MitjaGustin unten. Wenn Sie jedoch die Breite aller Spalten angeben, macht es keinen Sinn, auch die Tabellenbreite anzugeben.

    – SantiBailors

    25. Januar 2017 um 8:32 Uhr


Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
Hyathin

Sehen:
http://www.html5-tutorials.org/tables/changing-column-width/

Verwenden Sie nach dem Tabellen-Tag das col-Element. Sie brauchen kein schließendes Tag.

Wenn Sie beispielsweise drei Spalten hätten:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

  • @Sam Möglicherweise hatten Sie ein anderes Problem, das dies außer Kraft gesetzt hat, z. B. CSS, Inline-Stil oder falscher Dokumenttyp usw. Dies funktioniert definitiv, es ist die Standardmethode zum Festlegen von Spaltenstilen.

    – Sameer Alibhai

    27. Januar 2015 um 16:10 Uhr


  • Ich bin mir nicht sicher, ob dies überhaupt der „HTML5-Weg“ ist. Es scheint, dass colgroup/col in HTML5 nur wirklich zum Markieren von Spannen verwendet wird. MDN erwähnt die Verwendung des style-Attributs für col-Tags nicht (außer dass es es von globalen Attributen erbt) und sagt nur über bgcolor: „…use the CSS property… on the relevant

    elements.“ developer.mozilla.org/en-US/docs/Web/HTML/Element/col.

    – Stefan Panzer

    3. August 2015 um 23:23 Uhr

  • Arbeitete für mich mit Tabellenstil table-layout: fixed; width: 100%;. Danke!

    – nodisch

    18. Januar 2016 um 19:20 Uhr

  • Es ist nicht endgültig, aber w3schools erwähnt auch nicht die Verwendung von col dafür. Es schlägt die Verwendung von CSS für a <td> (oder ein <th>) – w3schools.com/tags/att_td_width.asp

    – Don Cheadle

    18. Februar 2016 um 15:25 Uhr


  • @Hyathin Ihre Lösung hat für mich wie ein Zauber funktioniert (danke) – es sind keine zusätzlichen Anstrengungen erforderlich. Aber es kann für andere je nach ihrer Situation anders sein. Oder vielleicht ist HTML5 jetzt im Jahr 2017 stabiler.

    – Nam

    24. Januar 2017 um 16:57 Uhr

Einfach hinzufügen <div> Etikett drin <td> oder <th> Breite innen definieren <div>. Das wird dir helfen. Nichts anderes funktioniert.

z.B.

<td><div style="width: 50px" >...............</div></td>

  • Ich habe diese Lösung mit der Angabe von min-width/max-width für dieselbe Pixelbreite kombiniert, nur um auf der sicheren Seite zu sein. Endlich funktioniert es. Ich weiß nicht, warum ich all diese zusätzlichen Runden laufen lassen muss, nur um es wirklich zu reparieren, lächerlich …

    – Csaba Toth

    28. Juli 2014 um 5:48 Uhr

  • Ich bin mir nicht sicher, wie dies besser ist, als dasselbe CSS festzulegen style="width: 50px" auf der <td>

    – Don Cheadle

    18. Februar 2016 um 15:26 Uhr

  • @mmcrae Es ist besser, weil es funktioniert, die Breite einzuschalten <td> nicht.

    – Madbreaks

    4. Januar 2017 um 20:35 Uhr

  • Lächerlich, aber für mich die am einfachsten funktionierende Lösung in Kombination mit display:inline-block; word-break:break-word;.

    – qräbnö

    10. November 2020 um 23:33 Uhr

  • Klappt wunderbar! Scheint die Breite des “td” zu erzwingen

    – Carlos Cruz

    3. Februar 2021 um 16:44 Uhr

Wenn Sie eine oder mehrere Spalten mit fester Breite benötigen, während die Größe anderer Spalten geändert werden soll, versuchen Sie, beide festzulegen min-width und max-width auf den gleichen Wert.

1646169730 234 Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
Vinoth Kumar

Sie müssen dies in das entsprechende CSS schreiben

table-layout:fixed;

  • Bessere Surround-Tabelle mit div-Tags als innerhalb von div mit overflow:auto

    – vinoth kumar

    16. Dezember 2010 um 6:00 Uhr

  • Hat bei mir funktioniert, als ich es mit Spaltengruppen kombiniert habe:

    .

    – Russ Batemann

    8. Juli 2015 um 3:13 Uhr


  • Dieser Artikel von Chris Coyer erklärt es gut: css-tricks.com/fixing-tables-long-strings

    – cssyphos

    12. November 2015 um 2:33 Uhr

1646169730 751 Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
doubleDown

Was ich mache ist:

  1. Stellen Sie die td-Breite ein:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
    
  2. Stellen Sie die td-Breite mit CSS ein:

    <td style="width:200px; height:50px;">
    
  3. Stellen Sie die Breite erneut als Max und Min mit CSS ein:

    <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
    

Es klingt ein bisschen repetitiv, aber es gibt mir das gewünschte Ergebnis. Um dies mit viel Leichtigkeit zu erreichen, müssen Sie die CSS-Werte möglicherweise in eine Klasse in Ihrem Stylesheet einfügen:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

dann:

<td class="td_size">

Setzen Sie das class-Attribut auf any <td> Sie wollen.

  • Bessere Surround-Tabelle mit div-Tags als innerhalb von div mit overflow:auto

    – vinoth kumar

    16. Dezember 2010 um 6:00 Uhr

  • Hat bei mir funktioniert, als ich es mit Spaltengruppen kombiniert habe:

    .

    – Russ Batemann

    8. Juli 2015 um 3:13 Uhr


  • Dieser Artikel von Chris Coyer erklärt es gut: css-tricks.com/fixing-tables-long-strings

    – cssyphos

    12. November 2015 um 2:33 Uhr

1646169731 93 Stellen Sie die Spaltenbreite der Tabelle unabhangig von der
Jack Bashford

Dies einstellen:

style="min-width:100px;" 

Hat für mich funktioniert.

905000cookie-checkStellen Sie die Spaltenbreite der Tabelle unabhängig von der Textmenge in den Zellen konstant ein?

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

Privacy policy