div inside td of a scrollable tbody. Scrollbar issue

Question

table > tbody {
    height: 600px;
    display: block;
    overflow: auto;
}

table > tbody > tr {
    width:100%;
    height: 1440px;
    display:table;
    table-layout:fixed;
}

This css makes a scrollable 'table', or scrollable 'tr'. It WORKS. But my problem is that I have a 'div' inside 'td's inside the 'tr'. And when I set the height of 'div' to 100%, or any height so that the whole 'div' is not within the visible range of tbody, in this case within 600px, the scrollbar for the document appears. The scrollbar for the table is the same with and without 'div'.

The scrollbar of the document extends as long as where the bottom of 'div' should be "behind" the 'tbody'. When I scroll the table, there is NO change to the scrollbar of the document.

Here is a very rough version of my problem: https://jsfiddle.net/hL8hemka/14/

As you can see, there are two scrollbars. If you can't see two, try deleting div { height: 100% } in the css section. You will notice one of two bars on the right (where the document scrollbar should be) disappearing.

How do I make a div with 100% height of tr without scrollbar on the document?

Why on earth do you want a `tr` to display as a `table`? ... For me it goes beyond all logic — Asons, Jul 05 '16 at 15:25
@LGSon do you think that's what's causing the problem? It's really hard for me to figure out what your suggesting in you comment... — user3290525, Jul 06 '16 at 00:46
I didn't suggest a solution yet, I just wanted to know why you set a `tr` to display as a `table` ... so you actually don't need to do that? ... if not, I will post a solution when back from work — Asons, Jul 06 '16 at 05:03
@LGSon As you can try from the jsfiddle I've provided, deleting that one line shrinks all td into 1~2pixeld cell. I referred to [this answer] (http://stackoverflow.com/a/17585032/3290525). — user3290525, Jul 06 '16 at 12:04
@LGSon I just noticed that deleting that line also shrinks the 'outer' scrollbar, but it does not make it disappear. Try changing height of tr to bigger or smaller number, you'll notice that the outer scroll bar does not shrink by the same amount. I don't want the outer scrollbar being there because the table is not bigger than the display section of the jsfiddle. — user3290525, Jul 06 '16 at 12:12
Have you checked this post: http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Asons, Jul 06 '16 at 14:22
@LGSon Tested on the last demo of the accepted solution. And it works. Here is my tested [jsfiddle] (http://jsfiddle.net/CrSpu/9431/). Left only one row, Added div inside td. Set height of the TR to any height greater than that of tbody. Set TD and DIV's height to 100%. Works nicely. Thanks — user3290525, Jul 07 '16 at 03:08

score 0 · Answer 1 · answered Jul 05 '16 at 15:11

I'm not seeing two scrollbars in your fiddle, unless you mean that there is a horizontal and a vertical scrollbar?

Either way, if you want to hide a scrollbar on any element simply set the overflow-x or overflow-y (depending on if the scrollbar is vertical or horizontal) to hidden. For example, if I wanted to hide a vertical scrollbar I would set overflow-x to hidden in my css like so:

body {
   overflow-x: hidden;
}

score 0 · Answer 2 · answered Jul 05 '16 at 15:12

0

Just disable the scrollbar:

body
{
    overflow: hidden;
}

fiddle

answered Jul 05 '16 at 15:12

CdSdw

349
1
6
19

Wow. That actually makes sense. Seems legit if I'm not going to need the scroll bar, but what if I want the scrollbar, but not the "buggy" scrollbar? – user3290525 Jul 06 '16 at 00:39

frnt · Answer 3 · 2016-07-05T15:22:53.860

0

That's because of you have added a border to td, remove that and it fit everything properly. The scrollbar at x-axis hides.

td {
 border:none;
}

div {
  border: 1px solid #111;
  height: 100%; /* Removing this hides the 'document' scrollbar*/
}

edited Jul 05 '16 at 15:22

answered Jul 05 '16 at 15:14

frnt

8,455
2
22
25

score 0 · Answer 4 · answered Jul 06 '16 at 09:13

If you don't have any other element in the table cells i suggest you to use a different approach. Instead of set height to the div you can position it as an absolute element. This way you can dimension it using top, left, right and bottom properties.

td {
  position:relative;
}

td > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

div inside td of a scrollable tbody. Scrollbar issue

4 Answers4