Powiedzmy, że moje kolumny w tabeli sąid, name, description, iphone. Thedescription kolumna zawiera 1-255 znaków, ale identyfikator ma maksymalnie 3 znaki.

Chciałbym, aby kolumny miały odpowiedni rozmiar, a nie każdą kolumnę o tym samym rozmiarze. I chciałbymdescription kolumna przepełni się do elipsy, gdy okno jest zbyt małe, aby zmieścić całą zawartość.

table-layout:fixed; to standardowy sposób na zrobienietext-overflow: ellipsis; działa, ale zmienia rozmiar wszystkich kolumn do tego samego rozmiaru. Wolałbym zachować szerokościauto zamiast naprawiać.

Możesz pomóc?

Oto mojajsFiddle: http://jsfiddle.net/RQhkk/1/

Oto zrzut ekranu, z którym mam do czynienia:

Zauważ jakTable 1 sprawia, że ​​wszystkie kolumny są tego samego rozmiaru? To okropne.

Zauważ jakTable 2 rozmiary kolumn na podstawie treści? Dobre. Z wyjątkiem sytuacji, gdy treść jest za długa:Table 3. Wtedy to nie pasuje. W takim przypadku chciałbym, żeby przelewał się do elipsy.

A oto moja tabela html i kod css:

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

Jeśli usunętable-layout: fixed; szerokości kolumn są tym, czego można oczekiwać - wielkością do zawartości. Niestety nie mogę po prostu uruchomić elipsy bez stałego układu. Gdzie się mylę?