Текущая таблица с td nowrap и переполнением текста?

Ответ 1

Изменить: исправлено это с помощью CSS:

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

Ответ 2

Вместо использования table-layout: fixed; для вашей таблицы вы можете использовать этот трюк, чтобы получить DIV, чтобы всегда занимать полное пространство TD с помощью функции text-overflow: ellipsis;:

div { width: 0; min-width: 100%; }

Основной трюк дает ширина что-то иное, чем auto/percent, и использование min-width 100%;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }

Таблица может иметь размер жидкости или фиксированную ширину. Просто дайте минимальную ширину для содержимого по мере необходимости.

<table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>

JSfiddle

Ответ 3

Мой полный пример:

<head>
    <style>
        table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
        </tr>
    </table>
</body>

Ответ 4

для меня,

<style type='text/css'>
table {
 white-space: normal;
}
</style>

работал...

Текущая таблица с td nowrap и переполнением текста?

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4