html - 如何使用底部的水平滚动条使表格彼此正确对齐

Question

我想知道如何使底部的水平滚动条在彼此顶部的表格正确对齐。

演示 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 和表格，但仍然无法获得正确的结果。

我想知道我哪里出错了。

请贡献...

Answer 1

删除 overflow:hidden; 上的 .tabonecntnr,.tabtwocntnr

看到这个 FIDDLE