1.) Это работает в Chrome.
Однако в Firefox таблица таблиц django, которую мы отображаем на нашем сайте, не соблюдает стиль переполнения. Из того, что я прочитал, элементы ячейки таблицы могут быть решением «для браузера», потому что они не являются чистыми блочными элементами (если я правильно понимаю стандарт), но вот картина моей проблемы.
Я пробовал возиться с тэгом max-width (никакого эффекта, кроме изменений ширины, но переполнение все еще искажается в следующей ячейке). Я мог бы технически обернуть строку (пробел), но нам не нужны огромные строки таблицы на странице.
На странице разработчика Mozilla ( Переполнение ) написано: «Чтобы эффект переполнения имел эффект, контейнер уровня блока должен иметь либо заданную высоту (высоту или максимальную высоту), либо заданный пробел чтобы затянуть ". Свойство height, похоже, тоже не меняет этого. Никакое другое CSS-свойство, которое я пробовал, похоже, не дает эффекта.
Я продолжаю думать, что это то, что Firefox может не поддерживать (т. Е. Ячейки таблицы не являются "блочными"?), Но я не могу сказать наверняка.
РЕДАКТИРОВАТЬ: Вот HTML. Это просто базовая таблица, созданная таблицами Django. Пожалуйста, игнорируйте встроенный стиль, который я пытался закомментировать.
РЕДАКТИРОВАТЬ: Вот встроенный код и ссылка JSFiddle внизу.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle