我想知道如何使底部的水平滚动条在彼此顶部的表格正确对齐。
演示 HTML 代码是:
<div class="cntnr">
<div class="tabonecntnr">
<table class="wd100 tabone">
<tbody>
<tr>
<td>TABLENAME</td>
<td>lorem ipsum</td>
<td>ABC</td>
</tr>
</tbody>
</table>
</div>
<div class="tabtwocntnr">
<table class="wd100 tabtwo">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
对应的css为:
.wd100{
width:100%;
}
.cntnr{
overflow-x:auto;
width: 100%;
border: 1px solid black;
}
.bgred{
background: red;
}
.tabone,.tabtwo{
border-collapse: collapse;
}
.tabone td{
background: red;
}
.tabonecntnr,.tabtwocntnr{
width:100%;
overflow: hidden;
}
我们可以看到第二个表没有完全显示。
我已经尝试将 position:absolute;
和 table-layout:fixed;
属性分别应用于内部 div 和表格,但仍然无法获得正确的结果。
我想知道我哪里出错了。
请贡献...
最佳答案
删除 overflow:hidden;
上的 .tabonecntnr,.tabtwocntnr
看到这个 FIDDLE
关于html - 如何使用底部的水平滚动条使表格彼此正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20947076/