CSS prozentuale Breite und Text-Überlauf in einer Tabellenzelle

Question

ich eine Tabelle, wo die Breite in Prozent ist Zellen und ich möchte text-overflow: ellipsis verwenden lange Textzeilen zu verbergen:

http://jsfiddle.net/Fm5bM/

In der Beispiel: Die Ellipse funktioniert in einem Div, aber nicht in der Zelle. Es wächst immer noch und ignoriert sowohl width:60% als auch max-width:60%.

Wenn ich der Zelle einen display:block hinzufüge, stoppt der Text bei 60% und erhält die Ellipse, aber die Gesamtbreite der Zelle ist immer noch die Größe des gesamten Textes.

http://jsfiddle.net/Fm5bM/3/

Letztlich möchte ich die Tabelle auf den Bildschirm passen. Gibt es eine Möglichkeit, es mit reinem CSS zu tun?

Answer 1

Dies ist einfach mit table-layout: fixed, aber "ein wenig schwierig", weil nicht viele Menschen über diese CSS-Eigenschaft wissen.

table { 
    width: 100%; 
    table-layout: fixed; 
} 

Sehen sie in Aktion auf der aktualisierten Geige hier: http://jsfiddle.net/Fm5bM/4/