title: How to scrollbar a table with variable amount of rows and columns
body: <p>I am having a problem trying to scroll a table which has variable amount of rows and columns. I've tried to put overflow (auto AND scroll) and max height and width to both the div containing the table and the table itself. I copied the source of the code and my css class. If someone could help me I will appreciate it! </p>
  
  <pre><code>&lt;div class="divCuotas"&gt;
  &lt;table class="tablaCuotas" cellpadding="1px" cellspacing="0"&gt;
  &lt;tr style="background-color: rgb(153, 153, 153);"&gt;
  &lt;td class="fullTableTD"colspan = "2"&gt;Comercio&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;td class="fullTableTD"&gt;10/02/2010&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "dataTables"&gt;
  &lt;td rowspan="2"&gt;Fravega&lt;/td&gt;&lt;td&gt;Cuota&lt;/td&gt;
  &lt;td&gt;1/9&lt;/td&gt;
  &lt;td&gt;2/9&lt;/td&gt;
  &lt;td&gt;3/9&lt;/td&gt;
  &lt;td&gt;4/9&lt;/td&gt;
  &lt;td&gt;5/9&lt;/td&gt;
  &lt;td&gt;6/9&lt;/td&gt;
  &lt;td&gt;7/9&lt;/td&gt;
  &lt;td&gt;8/9&lt;/td&gt;
  &lt;td&gt;9/9&lt;/td&gt;
  &lt;td&gt;10/9&lt;/td&gt;
  &lt;td&gt;11/9&lt;/td&gt;
  &lt;td&gt;12/9&lt;/td&gt;
  &lt;td&gt;13/9&lt;/td&gt;
  &lt;td&gt;14/9&lt;/td&gt;
  &lt;td&gt;15/9&lt;/td&gt;
  &lt;td&gt;16/9&lt;/td&gt;
  &lt;td&gt;17/9&lt;/td&gt;
  &lt;td&gt;18/9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "dataTables"&gt;
  &lt;td&gt;$&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;td&gt;10&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "dataTables"&gt;
  &lt;td rowspan = "2"&gt;Garbarino&lt;/td&gt;
  &lt;td&gt;Cuota&lt;/td&gt;
  &lt;td&gt;1/2&lt;/td&gt;
  &lt;td&gt;2/2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "dataTables"&gt;
  &lt;td&gt;$&lt;/td&gt;
  &lt;td&gt;13&lt;/td&gt;
  &lt;td&gt;13&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.tablaCuotas{
      line-height:15px;
      overflow:scroll; 
      height:100px;
      width:100px;
      margin-bottom: 5px;
      display: inline-table;
      background-color:#ededed;
  }
  
  .divCuotas{
      overflow:scroll; 
      height:100px;
      width:100px;
      font-weight:normal;
      margin-bottom: 20px;
      display: inline-table;
      text-align:center;
  }
  </code></pre>