Entry
How do I get scrollable cells?
Feb 26th, 2001 04:40
Martin Honnen,
With NN6 and IE4+ you set the height and width of the TD element and
then stuff a DIV into it with overflow: auto. Here is a complete example
<HTML>
<HEAD>
<TITLE>
scrollable cells
</TITLE>
<STYLE>
TD { width: 100px; height: 100px; }
DIV.cellContainer {
width: 100%; height: 100%;
overflow: auto;
}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<SCRIPT>
for (var r = 0; r < 3; r++) {
document.write('<TR>');
for (var c = 0; c < 5; c++) {
document.write('<TD>');
document.write('<DIV CLASS="cellContainer">');
for (var i = 0; i < 10; i++)
document.write(r + ', ' + c + ': ' + i + ': Kibology<BR>');
document.write('<\/DIV>');
document.write('<\/TD>');
}
document.write('<\/TR>');
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
Note that the resulting table widths are different in IE4+ and NN6.
NN6/Mozilla also seems to have a bug
http://bugzilla.mozilla.org/show_bug.cgi?id=70187
which unfortunately increases the cell width when you scroll with a down
arrow button
