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

Es hilft auch, die letzte "Filler-Zelle" mit width:auto zu setzen. Diese wird den verbleibenden Platz einnehmen und alle anderen Abmessungen wie angegeben belassen.

Answer 2

Machen Sie die akzeptierte Antwort für kleine Bildschirme reagieren, wenn kleiner als die feste Breite.

HTML:

    header 1
    header 234567895678657

    data asdfasdfasdfasdfasdf
    data 2

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/

Answer 3

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

  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }

  echt langer Header
  echt langer Text

Answer 4

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

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

Ich muss die Breite nicht am Tabelleneltern-Element festlegen oder table-layout verwenden.

Answer 5

Ich fand KAsuns Antwort funktioniert besser mit vw anstelle von px wie folgt:

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

Dies war das einzige Styling, das ich anpassen musste, um die Spaltenbreite zu ändern