views:

35

answers:

2

Hi! I am having a problem trying to scroll a table wich 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! thanks!

<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 de 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;
}
A: 

Put it in tbody

<tbody style="height:100px;overflow:scroll">

and check this http://www.imaputz.com/cssStuff/bigFourVersion.html and this http://codylindley.com/blogstuff/css/pushpin/pushpin.html

ntan
well, for this instance, I would actually add to the CSS tbody {height:100px;overflow:scroll;} - but I just don't like style in my markup/structure file :)
Mark Schultheiss
dear Mark i agree but typing that way was a simply fast answer.Nicole then will do the rest.Thanks
ntan
The only drawback of scrollable tables is that they are not fluid. Other than that, Mark nailed it.
questzen
+1  A: 

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

Gaby
YES!! thank youuuuuyou saved me!!genious :)
Nicole
only one more question... how do I get my question text to have the colors and not interpret the html code? because someone adited for me and I never learned how to do it. Thanks!
Nicole
I edited that for you .. You have to select your code and click on the button on the top bar of the editor that has the 1s and 0s ..Have a look at http://stackoverflow.com/editing-help
Gaby