Die Tabellenspaltenbreite unabhängig von der Menge des Textes in den Zellen konstant halten?

Question

In meiner Tabelle habe ich die Breite der ersten Zelle in einer Spalte auf 100px festgelegt.
Jedoch, wenn der Text in einer Zelle in dieser Spalte zu lang ist, wird die Breite der Spalte größer als 100px. Wie kann ich diese Ausdehnung deaktivieren?

Answer 1

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

Sie müssen die Zellenbreite festlegen (entweder th oder td funktionierten, ich habe beide eingestellt) UND das table-layout auf fixed einstellen. Aus irgendeinem Grund bleibt die Zellenbreite nur fest, wenn auch die Tabellenbreite festgelegt ist (ich finde das albern, aber egal).

Außerdem ist es nützlich, die overflow-Eigenschaft auf hidden zu setzen, um zu verhindern, dass zusätzlicher Text aus der Tabelle herauskommt.

Sie sollten auch alle Rahmen und Größen für CSS festlegen.

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;
}

    header 1
    header 234567895678657

    data asdfasdfasdfasdfasdf
    data 2

Hier ist es in JSFiddle

Dieser Typ hatte ein ähnliches Problem: Table cell widths - fixing width, wrapping/truncating long words

Answer 2

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

Nach dem Tabellen-Tag verwenden Sie das Col-Element. Sie benötigen kein schließendes Tag.

Zum Beispiel, wenn Sie drei Spalten hätten:

    ...

Answer 3

Fügen Sie einfach das

-Tag innerhalb von oder hinzu und definieren Sie die Breite innerhalb von

. Das wird Ihnen helfen. Nichts anderes funktioniert.

z.B.

...............

Answer 4

Wenn Sie eine oder mehrere Spalten mit fester Breite benötigen, während andere Spalten sich automatisch anpassen sollten, versuchen Sie beide min-width und max-width auf denselben Wert einzustellen.

Answer 5

Du musst dies innerhalb des entsprechenden CSS schreiben

table-layout:fixed;