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

Answer 2

demo of exactly what you want

待办事项：由于chadocat建议从overflow: hidden;删除.tabonecntnr

然后，要覆盖上表到全宽，如下表所示：

.wd100 {
    min-width:1000%; /* hack to give full width*/
    overflow:hidden; /*hide when the content is over */
}

为什么需要hack ??? 因为... table或div只占用宽度的100% ....你需要覆盖，甚至是{{1}这是扩展宽度....大于100％宽度!!!

Answer 3

对您的css进行以下更改

.tabonecntnr,.tabtwocntnr{
    width:100%;//overflow hidden removed.
}

如何使用底部的水平滚动条将表格正确对齐

3 个答案: