Potrzebuję w tabeli zrobić kolumnę z przewijaną treścią. W załączonym przykładzie cały problem jest widoczny. Generalnie chodzi o to, że wysokość tabeli i pola z przewijaną treścią nie może być sztywna i być uzależniona od tekstu w pozostałych kolumnach, a jeżeli tekstu w polu przewijania jest więcej, to tabela nie powinna rozciągać się. Jak to zrobić?
<html>
<head>
<style>
div.scroll
{
overflow:scroll;
}
div.hidden
{
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
function DivScroll(ObjId, T)
{
var ObjDiv = document.getElementById(ObjId);
ObjDiv.scrollTop = ObjDiv.scrollTop + T;
}
</script>
<p>Tak to powinno wyglądać, ale wysokość tabeli jest sztywna, a ma być uzależniona od długości tekstu w pierwszej i drugiej kolumnie:</p>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="300px" valign="top">
A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />
</td>
<td height="300px" valign="top">
B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />
</td>
<td height="300px" width="100px">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria1', -10)">Do gory</a>
</td>
</tr>
<tr>
<td>
<div style="width:100%;height:240px" id="galeria1" class="hidden">A<BR />B<BR />C<BR />D<BR />E<BR />F<BR />G<BR />H<BR />I<BR />J<BR />K<BR />L<BR />M<BR />N<BR />O<BR />P<BR />Q<BR />R<BR />S<BR />T<BR />U<BR />V<BR />W<BR />X<BR />Y<BR />Z<BR /></div>
</td>
</tr>
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria1', 10)">Na dol</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>To samo, ale wysokość tabeli jest uzależniona od wysokości tekstu w pierwszej i drugiej kolumnie i już nie chce działać:</p>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />
</td>
<td valign="top">
B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />
</td>
<td width="100px">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria2', -10)">Do gory</a>
</td>
</tr>
<tr>
<td>
<div style="width:100%;height:100%" id="galeria2" class="hidden">A<BR />B<BR />C<BR />D<BR />E<BR />F<BR />G<BR />H<BR />I<BR />J<BR />K<BR />L<BR />M<BR />N<BR />O<BR />P<BR />Q<BR />R<BR />S<BR />T<BR />U<BR />V<BR />W<BR />X<BR />Y<BR />Z<BR /></div>
</td>
</tr>
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria2', 10)">Na dol</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>Jeżeli jest mniej tekstu niż wysokość tabeli, to wtedy jest prawie dobrze, ale co do wewnętrzej tabeli Firefox 23 nie widzi, że jest Height=100%</p>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />
</td>
<td valign="top">
B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />
</td>
<td width="100px">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria3', -10)">Do gory</a>
</td>
</tr>
<tr>
<td>
<div style="width:100%;height:100%" id="galeria3" class="hidden">A<BR />B<BR />C<BR />D<BR />E<BR /></div>
</td>
</tr>
<tr>
<td height="30px">
<a rel="nofollow" href="javascript:DivScroll('galeria3', 10)">Na dol</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>