Make body scrollable

Question

I've created a table with javascript:

t=document.getElementById('tabby');

for(var k=1; k<=100; k++)
{
t.innerHTML+="<tr> <td> hello </td> </tr>";
}   

Thing is, the page isn't scrollable. (which makes sense. The table isn't really there when the page is loaded.)

to solve this, I tried setting the body's overflow to scroll, after the table has formed:

document.getElementById('body').setAttribute('style', 'overflow:scroll;');

but it didn't help. (of course the id of the body is "body" and the table's is "tabby")

What should I do?

Thanks.

edit:

whoops. seems like the position: absolute; i put in the table's style is casuing the trouble.

https://jsfiddle.net/t66dp7oc/

So what should i do if i need the position absolute and also the page scrollable?

Answer 1

I might not get the complete problem of your, but here is what you can try for the table. And this seems to be the best solution to me. Just try creating the variables outside the loop:

function tableCreate() {
    var body = document.getElementsByTagName('body')[0];
    var tbl = document.createElement('table');
    tbl.style.width = '100%';
    tbl.setAttribute('border', '1');
    var tbdy = document.createElement('tbody');
    for (var i = 0; i < 3; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < 2; j++) {
            if (i == 2 && j == 1) {
                break
            } else {
                var td = document.createElement('td');
                td.appendChild(document.createTextNode('\u0020'))
                i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
                tr.appendChild(td)
            }
        }
        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl)
}

Answer 2

The overflow property does not apply to tables.

So you can change the display of the table to block or inline-block:

table {
  display: block;
  overflow: scroll;
}

Note this might break some tabular functionalities.

var t = document.createElement('table'),
    tr = document.createElement('tr');
tr.innerHTML = '<td>Hello</td>';
for(var i=0; i<100; ++i)
  t.appendChild(tr.cloneNode(true));
document.body.appendChild(t);

table {
  display: block;
  overflow: scroll;
  height: 100px;
}