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

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

为.tabtwo,.tabthree你必须设置width:100%;，并为父母的宽度......添加

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

，那么你必须使用colspan修复的th

demo

宽度编辑

oka Ÿ...解决方案是在眼前...你的糟糕标记的一点发挥了犯规...... thead和tbody是用来标记单一表中的东西......你已经使用了2个不同的表格，这是如果不给明确的宽度，控制表可以是非常棘手

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

final demo

Answer 2

：为什么对齐问题是有..

删除这一点，你就完成了。

看到这个小提琴：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; 
} 

试穿table CSS改变width:100%到width:auto，然后看看内容重新尺寸的第一头单元格