div inside td of a scrollable tbody. Scrollbar issue - html

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?

Answer 1

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;
}

Answer 2

Just disable the scrollbar:
body
{
overflow: hidden;
}
fiddle

Answer 3

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

Answer 4

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;
}