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

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

37 голосов
/ 15 января 2009

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

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

Это для внутреннего клиентского приложения, поэтому должно работать только в 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>

Ответы [ 7 ]

35 голосов
/ 15 января 2009

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

<!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, и, кажется, он работает нормально.

19 голосов
/ 28 апреля 2011

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

17 голосов
/ 15 января 2009

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

10 голосов
/ 21 июля 2012

Попробуйте это: 

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;
2 голосов
/ 01 июня 2015 
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>
2 голосов
/ 18 марта 2013

Я понимаю, что вам нужно решение для IE6 / 7, но я просто выкидываю это для всех остальных.

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

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
0 голосов
/ 14 апреля 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...