I have a table that sizes to take up most of the page's width. The
(mostly empty) rightmost cell of a particular row starts off as wide as
it can, but it might be that it gets something that exceeds its initial
width, such as a long web address. In this case, I would like the
horizontal overflow to be active. However, it seems that if I affix
the style overflow-x:auto, then IE6 will cover the bottom line (of the
text) with the horizontal scroll bar upon overflow and FF 1.5 will do
the same if there is only one line involved (thus showing nothing).
Having the scrollbar cover text is not my idea of good horizontal
scrolling.
So the following accomodates various line counts in IE6 and FF 1.5. If
there are comments towards simplification/improvement, please share.
Csaba Gabor from Vienna
<html><head><ti tle>Overflow demo page</title></head>
<body bgcolor=yellow style=margin-left:.4in>
<table id=mytab width="100%" border>
<tr><td width='1%' valign=top><nob r>Row 1</nobr></td>
<td valign=top><div id=mydiv style="overflow-x:auto">
Longer text goes here</mydiv></td></tr>
<tr><td colspan=2>Secon d line</td></tr>
</table>
<br><br>
<table border id=tblBtns>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td colspan=2 align=center><b utton
onclick="return changeDiv('brok en')"
type=button>Sty le: broken</button></td></tr>
<script type='text/javascript'>
// install the buttons
var tblBtns = document.getEle mentById('tblBt ns');
for (var i=1;i<=3;++i)
for (var j in {short:0, long:1}) {
var html = "<button type=button " +
"onclick=\"retu rn changeDiv('" +
j + "', " + i + ")\">Lines: " +
i + ", style: " + j + "</button>";
tblBtns.rows[i-1].cells[j=="long" ? 1 : 0]
.innerHTML = html; }
// fix the special div's width to engage overflow handling
var mydiv = document.getEle mentById('mydiv ');
mydiv.setWidth = mydiv.style.wid th = mydiv.offsetWid th;
function repeat(str, amount, sep) {
// repeat string (str) amount times, separated by sep
if (!sep) sep = "";
for (var final=""; amount; amount>>=1,str+ =sep+str)
if (amount&1) final += (!final?"":sep) + str;
return final; }
function changeDiv (style, lineCount) {
// change the text of the top row, right cell
var div=document.ge tElementById('m ydiv');
var aText = ["This", "text", "is", "repeated", 7, "times"];
var separator = (style!="long") ? " " : "_";
var count = (style=="long") ? 10 : 1;
if (style=="broken ") lineCount = 25;
aText[4] = count * lineCount;
var baseText = aText.join(sepa rator);
var lineUnit = repeat(baseText , count);
var lineSep = (style=="broken ") ? "" : "<br>";
div.innerHTML = repeat(lineUnit , lineCount, lineSep);
if (div.scrollWidt h>div.setWidth &&
div.scrollHeigh t==div.offsetHe ight)
div.innerHTML += "<br> ";
return false; }
</script>
</body></html>
