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>