Ширина ячейки таблицы - ширина фиксации, обертывание/усечение длинных слов

У меня есть таблица, содержащая ячейки с текстом разной длины. Важно, чтобы все ячейки таблицы имели одинаковую ширину. Если это означает усечение длинных слов или принуждение прерывания длинными словами, тогда это ОК.

Я не могу понять, как заставить это работать.

Это для внутреннего клиентского приложения, поэтому он должен работать только в IE6 и IE7.

Ниже приведен пример страницы. Ячейка, содержащая onereallylongword, является оскорбительной.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>

Ответы

Ответ 1

Переполнение стека решает аналогичную проблему с длинными строками кода с помощью DIV и имеет overflow-x:auto. CSS не может разбить слова для вас.

Ответ 2

Пока вы фиксируете ширину самой таблицы и устанавливаете свойство table-layout, это довольно просто:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

Я тестировал это в IE6 и 7, и, похоже, он работает нормально.

Ответ 3

Если вы хотите, чтобы длинный текст был правильно завершен в новых строках, тогда в вашем вызове id таблицы используйте свойство css table-layout:fixed;, иначе просто css не сможет сломать длинный текст в новых строках.

Ответ 4

Попробуйте следующее:

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;

Ответ 5

Я понимаю, что вам нужно решение для IE6/7, но я просто бросаю это для кого-то еще.

Если вы не можете использовать table-layout: fixed, и вам все равно, что IE < 9 это работает для всех браузеров.

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}

Ответ 6

<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>

Ответ 7

попробуйте td {background-color:white}

Он просто работал для столбца, который я не хотел растоптать предыдущим длинным текстом столбца.