Question

我想知道如何在底部垂直对齐两个带水平滚动的表格。

以下是HTML代码：

<div class="cntnr">
<div class="tabtwocntnr">
    <table class="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>
    </table>
    </div>
    <div class="tabthreecntnr">
    <table class="tabthree">
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td>Content 8</td>
            <td>Content 9</td>
            <td>Content 10</td>
            <td>Content 11</td>
            <td>Content 12</td>
            <td>Content 13</td>
            <td>Content 14</td>
            <td>Content 15</td>
            <td>Content 16</td>
            <td>Content 17</td>
            <td>Content 18</td>
            <td>Content 19</td>
            <td>Content 20</td>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td>Content 8</td>
            <td>Content 9</td>
            <td>Content 10</td>
            <td>Content 11</td>
            <td>Content 12</td>
            <td>Content 13</td>
            <td>Content 14</td>
            <td>Content 15</td>
            <td>Content 16</td>
            <td>Content 17</td>
            <td>Content 18</td>
            <td>Content 19</td>
            <td>Content 20</td>
        </tr>
    </tbody>
    </table>
</div>
   </div>

相应的css是：

.tabtwo,.tabthree{
    border-collapse: collapse;
    table-layout:fixed;
}
.tabtwo th, .tabthree td{
    border-right: 1px solid black;
}
.tabthree td{
    text-align: center;
    border-top: 1px solid #000;
}
.tabtwocntnr,.tabthreecntnr{
    width:100%;

}
    .cntnr{
    overflow-x:auto;
    width: 100%;
    border: 1px solid black;
}

小提琴是： http://jsfiddle.net/8H5Ek/

正如我们在这个小提琴中看到的那样，两张桌子没有正确对齐（相对于彼此）。底桌的右下角也有一些空白区域。我试过通过应用table-layout解决它：fixed;到两个表。

我无法达到预期的效果。

请通过捐助帮助我。

Answer 1

如果没有给出明确的宽度，控制表可能会非常棘手。

请看这个小提琴： http://jsfiddle.net/8H5Ek/3/

将这些样式添加到您的css：

table { width: 100%; }
th, td { width: 84px; }

您必须仔细估算td的宽度。

修改：

这是另一个小提琴： http://jsfiddle.net/8H5Ek/12/

您可以使用省略号控制内容长度。此外，您不需要这两个内部div（ tabtwocntnr 和 tabthreecntnr ）。你可以摆脱它们。

th, td { width: 84px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }

尝试在width:100% css上将width:auto更改为table，然后查看内容如何重新调整第一个标题单元格的大小

Answer 2

.tabtwo,.tabthree您必须设置width:100%;并设置父级的宽度...添加

html, body {
    width:100%;/* added */
    height:100%;/* added */
    margin:0;/* added */
    padding:0;/* added */
}

然后您必须使用colspan来修复th

的宽度

demo

修改

好吧......解决方案就在眼前......你的坏标记有点犯规...... thead和tbody用于在单个表格中标记内容...您已经使用了2个不同的表格，这就是为什么会出现对齐问题。

删除此项并完成后：

</table> </div> <div class="tabthreecntnr"> <table class="tabthree">

final demo

如何在底部垂直对齐两个带水平滚动的表格

2 个答案: