我在尝试滚动具有可变数量的行和列的表格时遇到问题。我试图将溢出(自动和滚动)和最大高度和宽度同时添加到包含表格的 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;
}
最佳答案
div 中的 display:inline-table
是导致布局困惑的原因..
去掉它就没事了..
您正在将 div 转换为表格,而表格不允许滚动 ..
关于html - 如何滚动具有可变数量的行和列的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2237507/