Nehmen wir an, meine Spalten in einer Tabelle sindid, name, description, undphone. Dasdescription Spalte ist 1-255 Zeichen, aber die ID ist nur maximal 3 Zeichen.

Ich möchte, dass die Spalten eine angemessene Größe haben und nicht, dass jede Spalte dieselbe Größe hat. Und ich hätte gerne diedescription Spalte, die zu einem Auslassungspunkt überläuft, wenn das Fenster zu klein ist, um den gesamten Inhalt aufzunehmen.

table-layout:fixed; ist die Standardmethodetext-overflow: ellipsis; Arbeit, aber es ändert die Größe aller Spalten auf die gleiche Größe. Ich würde es vorziehen, die Breite beizubehaltenauto eher als fest.

Kannst du helfen?

Hier ist meinsjsFiddle: http://jsfiddle.net/RQhkk/1/

Hier ist ein Screenshot von dem, womit ich es zu tun habe:

Beachte wieTable 1 macht alle Spalten gleich groß? Das ist schrecklich.

Beachte wieTable 2 Größe der Spalten basierend auf dem Inhalt? Das ist gut. Außer wenn der Inhalt zu lang ist:Table 3. Dann passt es nicht. In diesem Fall möchte ich, dass es zu einem Auslassungspunkt überläuft.

Und hier ist meine HTML-Tabelle und mein CSS-Code:

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th class="ellipsis">description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="ellipsis">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

<style>
#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

Wenn ich das entfernetable-layout: fixed; Die Spaltenbreiten entsprechen den erwarteten Größen für den Inhalt. Leider kann ich die Auslassungspunkte nur mit dem festgelegten Layout zum Laufen bringen. Wo gehe ich falsch?