Festlegen der Spaltenbreite der Tabellenspalte unabhängig von der Textmenge in den Zellen?

535

In meiner Tabelle habe ich die Breite der ersten Zelle in einer Spalte festgelegt 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?

Mischa Moroshko
quelle
5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table könnte Ihnen helfen, in die richtige Richtung zu
weisen
2
In meinem Fall geschah keine Erweiterung, sondern das Gegenteil: unerwünschtes Schrumpfen der Breite trotz meiner expliziten Breitendeklaration. Lächerlich!
Csaba Toth
Die einzig richtige Lösung besteht darin, colgroup mit darin enthaltenen Spalten zu verwenden und die Spaltenbreite festzulegen.
MightyPork
table-layout:fixed;ist die Lösung
emfi

Antworten:

607

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

Sie müssen die Zellenbreite (entweder einzustellen thoder tdarbeitete, habe ich beide) und stellen Sie die table-layoutauf fixed. Aus irgendeinem Grund scheint die Zellenbreite nur dann fest zu bleiben, wenn auch die Tabellenbreite festgelegt ist (ich denke, das ist albern, aber was auch immer).

Es ist auch nützlich, die overflowEigenschaft so festzulegen hidden, dass kein zusätzlicher Text aus der Tabelle austritt.

Sie sollten sicherstellen, dass alle Rahmen und Größen auch für CSS belassen werden.

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 korrigieren, lange Wörter umbrechen / abschneiden

ptpaterson
quelle
77
Es ist wichtig, dies zu beachten: "Der Browser legt dann die Spaltenbreiten basierend auf der Breite der Zellen in der ersten Zeile der Tabelle fest", von stackoverflow.com/questions/570154/…
daniloquio
12
Es funktioniert, wenn die Tabellenbreite nicht festgelegt ist. jsfiddle.net/lavinski/CGCFW/3 Sie benötigen nur eine dynamische Zeile, um den verbleibenden Speicherplatz einzunehmen.
Daniel Little
2
@DanielLittle Alternativ können Sie die Tabellenbreite auf 1px setzen. mit overflow: visiblefür die Tabellen der dynamischen Größe, solange die Größe der Zellen fixiert und Überlauf ist sichtbar spielt es keine Rolle , ob die Größe der Tabelle selbst größer oder kleiner als die tatsächlichen Zellen ist.
Mahn
Was können Sie tun, wenn Ihr td "width = 30%;" hat?
71GA
Bitte fügen Sie den Überlauf hinzu: hidden @ RokoC.Buljan
Alex Grande
178

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

Verwenden Sie nach dem Tabellen-Tag das col-Element. Sie benötigen kein schließendes Tag.

Wenn Sie beispielsweise drei Spalten hatten:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
Hyathin
quelle
26
Diese! Dies ist die HTML5-Antwort und sie funktioniert verdammt gut, ohne dass ich durch dumme Reifen springen muss. Außerdem können Sie stattdessen <col class = "someClassName"> verwenden, um Ihre Breite in CSS beizubehalten und Ihr HTML nicht mit Stilinformationen zu verschmutzen.
John Munsch
2
@Sam Möglicherweise haben Sie ein anderes Problem, das dies überschreibt, wie z. B. CSS, Inline-Stil oder falscher Doctype usw. Dies funktioniert definitiv, es ist die Standardmethode zum Festlegen von Spaltenstilen.
Sameer Alibhai
Ich bin mir nicht sicher, ob dies überhaupt der 'HTML5-Weg' ist. Es scheint, dass colgroup / col in html5 nur zum Markieren von Bereichen verwendet wird. MDN erwähnt die Verwendung des style-Attributs für col-Tags nicht (außer es erbt es von globalen Attributen) und sagt nur über bgcolor: "... verwenden Sie die CSS-Eigenschaft ... für die relevanten <td> -Elemente." developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer
5
Arbeitete für mich mit Tischstil table-layout: fixed; width: 100%;. Vielen Dank!
Nrodic
Es ist nicht endgültig / endgültig, aber w3schools erwähnt auch nicht die Verwendung coldafür. Es schlägt die Verwendung von CSS vor, das auf a <td>(oder a <th>) angewendet wird
Don Cheadle
128

Fügen Sie einfach ein <div>Tag hinzu <td>oder <th>definieren Sie die Breite darin <div>. Das wird dir helfen. Sonst funktioniert nichts.

z.B.

<td><div style="width: 50px" >...............</div></td>
KAsun
quelle
2
Ich habe diese Lösung mit der Angabe von Min-Breite / Max-Breite für dieselbe Pixelbreite kombiniert, um auf der sicheren Seite zu sein. Endlich funktioniert es. Ich weiß nicht, warum ich all diese zusätzlichen Runden laufen muss, um es wirklich zu reparieren, lächerlich ...
Csaba Toth
1
Unsicher, wie dies besser ist, als dasselbe CSS style="width: 50px"auf dem<td>
Don Cheadle
2
@mmcrae Es ist besser, weil es funktioniert, das Einstellen der Breite <td>nicht.
Madbreaks
66

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 min-widthund max-widthdenselben Wert festzulegen .

scrrr
quelle
Dies funktionierte bei mir beim expliziten Einstellen der Breite table-layout: fixed;nicht.
Jordan Mack
Heilige Scheiße! Keine der anderen Lösungen funktionierte oder war zu klobig! Das hat perfekt funktioniert! Auch kein Div erforderlich!
NeilRoy
29

Sie müssen dies in das entsprechende CSS schreiben

table-layout:fixed;
Vinoth Kumar
quelle
besser sorround Tisch mit div - Tags dann in div Verwendung overflow: auto
vinoth kumar
Hat bei mir funktioniert, als ich es mit Spaltengruppen kombiniert habe: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ colgroup> <tbody> ... </ tbody> </ table>.
Russ Bateman
Dieser Chris Coyer Artikel erklärt es gut: css-tricks.com/fixing-tables-long-strings
cssyphus
24

Was ich tue 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 mit CSS erneut auf max und min 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 Leichtigkeit zu erreichen, müssen Sie möglicherweise die CSS-Werte 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">

Platzieren Sie das Klassenattribut nach <td>Belieben.

ErickBest
quelle
Dies war die einzige Lösung, die in allen Fällen zu funktionieren schien, ohne zusätzliche, möglicherweise unerwünschte Einschränkungen aufzuerlegen.
Sam
3

Ich habe das benutzt

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
Svetoslav Marinov
quelle
Vergessen Sie nicht ntch-child (2) (oder 3, 4 und so weiter)
Tabelle td n-tes Kind (n + 1) {...} wird alle außer der ersten Spalte abdecken
Ed Randall
2

Wenn Sie kein festes Layout wünschen, geben Sie eine Klasse für die Spalte an, deren Größe entsprechend ist.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>
mcdado
quelle
2

Es hilft auch, die letzte "Füllzelle" mit der Breite: auto einzufügen . Dies nimmt den verbleibenden Platz ein und lässt alle anderen Abmessungen wie angegeben.

Mitja Gustin
quelle
2

Lassen Sie die akzeptierte Antwort auf kleine Bildschirme reagieren, wenn diese kleiner als die feste Breite sind.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Willy Richardson
quelle
2

Einstellen:

style="min-width:100px;" 

Hat für mich gearbeitet.

Priyanka Arora
quelle
1

KAsun hat die richtige Idee. Hier ist der richtige Code ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Aaron Averill
quelle
1

Gemäß meiner Antwort hier ist es auch möglich, einen Tabellenkopf (der leer sein kann) zu verwenden und relative Breiten für jede Tabellenkopfzelle anzuwenden. Die Breiten aller Zellen im Tabellenkörper entsprechen der Breite ihres Spaltenkopfs. Beispiel:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Zeige Ergebnis

Verwenden Sie alternativ colgroupwie in Hyathins Antwort vorgeschlagen.

eicksl
quelle
0

Ich verwende ein :: after-Element in der Zelle, in dem ich unabhängig vom vorhandenen Text eine minimale Breite festlegen möchte:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Ich muss weder die Breite des übergeordneten Tisches festlegen noch das Tabellenlayout verwenden.

Dan Macák
quelle
-4

Ich fand, dass KAsuns Antwort mit vw besser funktioniert als mit px wie folgt :

<td><div style="width: 10vw" >...............</div></td>

Dies war das einzige Styling, das ich brauchte, um die Spaltenbreite anzupassen

user3229980
quelle
-5

Sie müssen nicht festlegen "fixed"- Sie müssen lediglich overflow:hiddenfestlegen , da die Spaltenbreite festgelegt ist.

Vladimír Hála
quelle
3
Was den Inhalt hinter Zellgrenzen verbirgt, ist keine gute Idee.
Mystrdat