Question

我在尝试滚动具有可变行数和列数的表时遇到问题。我试图将溢出（自动和滚动）和最大高度和宽度放到包含表格和表格本身的div中。我复制了代码的源代码和我的css类。如果有人能帮助我，我会很感激！

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

这是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

div处的display:inline-table正在弄乱您的布局......

删除它，它会没事......

您正在将div转换为表格，而表格不允许滚动..

Answer 2

把它放在tbody

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

并检查http://www.imaputz.com/cssStuff/bigFourVersion.html 这个http://codylindley.com/blogstuff/css/pushpin/pushpin.html

如何滚动具有可变行数和列数的表

2 个答案: