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

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

Ответ 1

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

Самый простой способ - установить внутри вашей ячейки 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 too big for the cell
</div></td>

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

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

Ответ 2

<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/

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

Ответ 3

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

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

div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}