полоса прокрутки для ячейки таблицы

Есть ли способ добавить полосу прокрутки к тегу «td»? У меня есть динамический контент внутри тега «td». Я хочу, чтобы «td» имел фиксированный размер, и если содержимое становится больше, чем размер «td», я хочу, чтобы полоса прокрутки появлялась только в этой конкретной ячейке. Есть ли способ добиться этого?


html scrollbar html-table
person Prasanna    schedule 03.01.2013    source источник
comment
Для этого вы можете использовать jquery jscrollpane.   -  person Klevis Miho    schedule 03.01.2013

Ответы (3)


arrow_upward
46
arrow_downward

Да, вы можете это сделать.

Самый простой способ — поместить внутри вашей ячейки div, заполняющий ее, и установить его свойство стиля overflow.

CSS:

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

HTML:

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>

Если вы хотите, чтобы полоса прокрутки всегда была видна, даже если содержимое не обрезано, замените auto на scroll в CSS.

Демонстрация

person Denys Séguret    schedule 03.01.2013
comment
Можно ли добавить полосу прокрутки ко всем ячейкам td в строке таблицы, кроме первой и последней ячеек в той же строке? - person user3281466; 02.09.2014
comment
Мне также понадобился table-layout: fixed;, чтобы заставить его работать. - person Stefan Dragnev; 06.09.2017

arrow_upward
13
arrow_downward 

<table  width ="400" >
    <tr>
        <td >
            <div style="width:100%; max-height:300px; overflow:auto">Your content here 
             </div>
        </td>
    </tr>
</table>

http://jsfiddle.net/7T2S4/1/

Надеюсь это поможет

person Parag    schedule 03.01.2013
comment
ваш код также не работает: jsfiddle.net/7T2S4/78, потому что вы сделали очень специфический пример, который работает, не означает, что это хорошее решение. - person vsync; 23.03.2014
comment
vsync, я зашел на эту страницу с новой версией FF в 2016 году, и вроде все работает нормально. Возможно, у вас были проблемы со старым браузером. Важным моментом, минимальным требованием, является то, что div, по-видимому, должен иметь каким-то образом установленный атрибут высоты в дополнение к overflow:auto. - person Jose_X; 23.08.2016
comment
Работает большое спасибо. У меня были проблемы с поиском действительного решения. - person Flyout91; 29.06.2017
comment
я нашел много решений, но только это работает .. большое спасибо Parag - person Manthan Patel; 27.11.2017

arrow_upward
3
arrow_downward

Вам необходимо указать «высоту» или «ширину» элемента div, чтобы он соответственно прокручивался. например, вы хотите применить прокрутку по вертикали (ось Y): -

<td><div class="scrollable">
    Some content with a scrollbar if it's not fit in your customized container
</div></td>

div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}
person gopal sharma    schedule 28.07.2016