переполнение: прокрутки; в <td> - PullRequest
Новая
       38

переполнение: прокрутки; в <td>

20 голосов
/ 31 июля 2009

Почему свойство 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>

Из спецификаций CSS 1 , 2 , я не понимаю, почему.

Ответы [ 3 ]

29 голосов
/ 31 июля 2009

Вы должны обернуть его в 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>
9 голосов
/ 08 января 2013

Сначала укажите желаемую высоту для td, а затем примените свойство "float: left" к соответствующему значению "td", которое вы хотите отобразить на полосе прокрутки.

5 голосов
/ 31 июля 2009

Я получил кое-что отсюда !

Андрей Федонюк писал:

Это на самом деле мой вопрос: «Одна техническая причина заключается в том, что свойство переполнения не применяется к таблицы. "- почему? В чем причина?

Я не эксперт, но я верю, что это только для обратной совместимости с устаревшее поведение таблицы. Ты можешь проверить «автоматическая» раскладка стола Алгоритм в спец. Я красивая уверен, что этот алгоритм макета несовместим с переполнением собственность (или, точнее, алгоритм компоновки никогда не приведет к необходимость любого значения переполнения кроме «видимого»).

Да, вот почему я спрашиваю. Похоже, нет никаких формальных причин почему или не должен быть прокручиваемым, но кажется Поставщики UA достигли некоторого молчаливого соглашения в этой области. Так это вопрос.

Спецификация согласна с вами в отношении к элементам. Ячейки таблицы должен уважать переполнение, хотя Mozilla, по крайней мере, кажется, не делать так. Я не могу ответить на ваш вопрос в этот экземпляр, хотя я бы все равно думаю, ответ все еще привязан к устаревший рендеринг.

Основной поток здесь .

...