Почему свойство CSS overflow:scroll; не работает в <td>, а overflow:hidden; работает хорошо?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
Я получил кое-что отсюда!
Андрей Федонюк написал:
На самом деле это мой вопрос: «Одна из технических причин заключается в том, что свойство переполнения не применяется к таблицам». - Почему? Что это за причина?
Я не эксперт, но я считаю, что это просто для обратной совместимости с устаревшим поведением таблиц. Вы можете проверить «автоматический» алгоритм верстки таблицы в спецификации. Я почти уверен, что этот алгоритм компоновки несовместим со свойством переполнения (или, точнее, алгоритм компоновки никогда не приведет к необходимости какого-либо значения переполнения, кроме «видимого»).
Ага, поэтому и спрашиваю. Похоже, что нет формальных причин, по которым или не следует прокручивать, но кажется, что поставщики UA достигли какого-то молчаливого соглашения в этой области. Так и вопрос.
Спецификация согласна с вами в отношении элементов. Ячейки таблицы должны учитывать переполнение, хотя, по крайней мере, Mozilla, похоже, этого не делает. Я не могу ответить на ваш вопрос в этом случае, хотя я все же предполагаю, что ответ все еще привязан к устаревшему рендерингу.
Основная ветка здесь.
Вы должны обернуть его в div, который будет работать:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Сначала укажите желаемую высоту для td, а затем примените свойство «float: left» к соответствующему «td», на котором должна отображаться полоса прокрутки.
