Scrollable nested table in HTML

Question

I have some troubles when creating scrollable table in HTML.

From some similar question in Stackoverflow, using overflow: auto in CSS is workable, but I can't implement successfully

Is there anyone who can help to check is there anything wrong in my code?

I'd like to make left red cell scrollable only.

#samples {
    overflow: auto;
    height: 200px;
}

Full code is in: Jsfiddle

Filip Huysmans · Accepted Answer · 2014-02-20T09:09:48.727

2

Add the following CSS to the <table id="samples">

style="height:200px; overflow:auto;display:block;"

Or in the CSS file

#samples {
   overflow: auto;
   height: 200px;
   display:block;
}

Fiddle here

EDIT

This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify

I've messed a little with the CSS in order to center the elements.

Fiddle

edited Feb 20 '14 at 09:09

answered Feb 19 '14 at 09:54

Filip Huysmans

1,301
1
20
44

Do you know why I can't rearrange the width in the `#samples`? – Jimmy Lin Feb 20 '14 at 08:49
can you help to check my update code: http://jsfiddle.net/LNj9m/7/ . I extract the scrollable part and I can't re-arrange the width of left side column. Thank you. – Jimmy Lin Feb 20 '14 at 10:27
@Jimmy Is this what you need? http://jsfiddle.net/k25ak/ – Filip Huysmans Feb 20 '14 at 12:43
Nope. Can two `sample_path_01` placed parallel ? Like http://jsfiddle.net/k25ak/1/ but should be wilder. – Jimmy Lin Feb 20 '14 at 15:18
@Jimmy Yes they can, I changed the display to inline-block on the th element: http://jsfiddle.net/k25ak/2/ – Filip Huysmans Feb 20 '14 at 15:21
I didn't get it. Can I specify a number for the width? ex 70% for 1st `th` and 30% for 2nd. http://jsfiddle.net/k25ak/3/ – Jimmy Lin Feb 20 '14 at 15:40
add partial codd using `nth-child` http://jsfiddle.net/k25ak/3/ – Jimmy Lin Feb 20 '14 at 15:44
@Jimmy Try 70% and 29% – Filip Huysmans Feb 20 '14 at 15:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47968/discussion-between-filip-huysmans-and-jimmy) – Filip Huysmans Feb 20 '14 at 15:54
I can't make `samples` as wilder as it's parent table. – Jimmy Lin Feb 21 '14 at 01:48

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

one solution would be to put the table inside a div and make the div scrollable?

See this post -

Making a div vertically scrollable using CSS

Hope this helps.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 19 '14 at 09:50

Dave

76
1
8

Scrollable nested table in HTML

2 Answers2