Ширина ячеек таблицы - установка ширины, перенос / усечение длинных слов
У меня есть таблица, содержащая ячейки с текстом разной длины. Важно, чтобы все ячейки таблицы были одинаковой ширины. Если это означает сокращение длинных слов или принудительный разрыв в длинных словах, тогда ничего страшного.
Я не могу понять, как заставить это работать.
Это для внутреннего клиентского приложения, поэтому он должен работать только в 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
Stack Overflow решил аналогичную проблему с длинными строками кода, используя DIV и имея overflow-x:auto. CSS не может разбить слова за вас.
автоматическое переполнение приводит к добавлению полос прокрутки - в моем случае, похоже, мне лучше использовать overflow: hidden.
word-wrap: break-word не разбивает слова?
Это будет на пробелах, но не на длинных словах, которые переполняются.
@Diodeus как насчет «разрыв слов: сломать все»;
Попробуйте white-space: nowrap;
CSS может разбить слова за вас: stackoverflow.com/questions/1258416/word-wrap-in-an-html-tab le
Пока вы фиксируете ширину самой таблицы и устанавливаете свойство 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, и, похоже, все работает нормально.
Это работает хорошо - однако в моем сценарии количество столбцов может меняться, и мне будет сложно рассчитать общую ширину таблицы.
@RichardEv Насколько я проверил с помощью Chrome, ширина, которую можно указать для таблицы, может быть любой. Итак, вы можете просто установить его как 0.
Вместо overflow: hidden для <td> я использую word-wrap: break-word. Лучше, когда ты не хочешь скрывать переполнение
Это дерьмо работает ... Особенно та table-layout: исправлено. Я пробовал все остальное, но ничего не помогло.
попробуйте td {background-color:white}
Это просто сработало для столбца, который я не хотел, чтобы длинный текст предыдущего столбца был растоптан.
Я не уверен, что это сработает - длинный текст предыдущего столбца обязательно приведет к увеличению ширины этого столбца. Не могли бы вы отредактировать свой ответ, включив в него фрагмент HTML-кода для иллюстрации?
Я не понимаю, как здесь может помочь установка белого цвета фона?
Если вы хотите, чтобы длинный текст был правильно обернут в новые строки, тогда в вызове идентификатора таблицы используйте свойство css table-layout:fixed;, иначе просто css не может разбить длинный текст на новые строки.
Просто гениально. Работал как шарм после установки этого.
Спасибо!! Решено: 80%; из моих проблем
Пожалуйста, @stackoverflow, покажите этот ответ вверху. Идеальное и простое решение. Просто сначала повозился с верхними, а потом понял это.
Это слн. лучше всего, так как позволяет применить стиль ко всей таблице, а не только к содержимому ячейки.
Попробуй это:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
Я понимаю, что вам нужно решение для IE6 / 7, но я просто предлагаю его всем остальным.
Если вы не можете использовать table-layout: fixed и вас не волнует IE <9, это работает для всех браузеров.
td {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
max-width: 30px;
}
<style type = "text/css">
td { word-wrap: break-word;max-width:50px; }
</style>
По сути, дубликат http://stackoverflow.com/questions/416401/using-css-to-creat e-table-cells-of-a-s специфическая ширина-без-переноса слов К сожалению, лучший ответ, который я знаю, - это упаковка содержимого
<td>в<div>и применение к нему фиксированной ширины и переполнения.