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

Was ich mache, ist:

1. Setze die td-Breite:

2. Setze die td-Breite mit CSS:

3. Setze die Breite erneut als Max und Min mit CSS:

Es klingt ein wenig repetitiv, aber es liefert mir das gewünschte Ergebnis. Um dies mit mehr Leichtigkeit zu erreichen, können Sie 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) Dies kann für einige Inhaltsüberschüsse nützlich sein*/   
}

dann:

Fügen Sie das Klassenattribut zu jedem hinzu, das Sie möchten.

Answer 2

Dies einstellen:

style="min-width:100px;" 

Hat für mich funktioniert.

Answer 3

Ich habe dies benutzt

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

.app_downloads_table tr td:last-child {
    text-align: center;
}

Answer 4

Gemäß meiner Antwort hier ist es auch möglich, einen Tabellenkopf (der leer sein kann) zu verwenden und relative Breiten auf jede Tabellenkopfzelle anzuwenden. Die Breiten aller Zellen im Tabellenkörper passen sich der Breite ihrer Spaltenüberschrift an. Beispiel:

HTML

      1
      Einige Text...
      Mai 2018
      Bearbeiten

      2
      Noch mehr Text...
      April 2018
      Bearbeiten

CSS

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

td {
  border: 1px solid #999999;
}

Ergebnis anzeigen

Alternativ können Sie colgroup verwenden, wie in Hyathins Antwort vorgeschlagen.

Answer 5

Wenn Sie kein festes Layout möchten, geben Sie eine Klasse für die Spalte an, die entsprechend dimensioniert werden soll.

CSS:

.special_column { width: 120px; }

HTML:

...