лента за превъртане за клетка от таблица

Има ли начин да добавите лента за превъртане към етикет „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 style.

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