Question

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!

<div class="divCuotas">
<table class="tablaCuotas" cellpadding="1px" cellspacing="0">
<tr style="background-color: rgb(153, 153, 153);">
<td class="fullTableTD"colspan = "2">Comercio</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
</tr>
<tr class = "dataTables">
<td rowspan="2">Fravega</td><td>Cuota</td>
<td>1/9</td>
<td>2/9</td>
<td>3/9</td>
<td>4/9</td>
<td>5/9</td>
<td>6/9</td>
<td>7/9</td>
<td>8/9</td>
<td>9/9</td>
<td>10/9</td>
<td>11/9</td>
<td>12/9</td>
<td>13/9</td>
<td>14/9</td>
<td>15/9</td>
<td>16/9</td>
<td>17/9</td>
<td>18/9</td>
</tr>
<tr class = "dataTables">
<td>$</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr class = "dataTables">
<td rowspan = "2">Garbarino</td>
<td>Cuota</td>
<td>1/2</td>
<td>2/2</td>
</tr>
<tr class = "dataTables">
<td>$</td>
<td>13</td>
<td>13</td>
</tr>
</table>
</div>

Here is the CSS:

.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;
}

Answer 1

The display:inline-table at the div is what is messing up your layout ..

Remove it and it will be fine..

You are turning the div to a table and tables do not allow scrolling ..