how to vertically align two tables with horizontal scroll at bottom - html

Question

I would like to know how to vertically align two tables with horizontal scroll at bottom.
The following is the HTML code:
<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>
The corresponding css is:
.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;
}
The fiddle is :
http://jsfiddle.net/8H5Ek/
As we can see in this fiddle the two tables are not aligned properly(with respect to each other).There is also some white space at the right corner of the bottom table. I have tried resolving it by applying table-layout: fixed; to both the tables.
I am unable to achieve the desired result.
Please help me by contributing.

Answer 1

Without giving explicit widths, controlling tables can be very tricky.
See this fiddle: http://jsfiddle.net/8H5Ek/3/
Add these styles to your css:
table { width: 100%; }
th, td { width: 84px; }
You have to estimate the width of the td carefully.
Edit:
Here is another fiddle: http://jsfiddle.net/8H5Ek/12/
You can control the content length by using ellipsis. Moreover, you do not need those two inner divs (tabtwocntnr and tabthreecntnr). You can rid of them.
th, td {
width: 84px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
try changing width:100% to width:auto on the table css and then see how the content re-sizes the first header cell

Answer 2

for .tabtwo,.tabthree you have to set width:100%; and set the width for parent...add
html, body {
width:100%;/* added */
height:100%;/* added */
margin:0;/* added */
padding:0;/* added */
}
then you have to use colspan to fix the width of th
demo
EDIT
okay...solution was there in front of eyes...bit of your bad markup played foul....
thead and tbody is used for marking things in single table...you have used 2 different tables for it, that's why alignment issue is there..
delete this and you are done:
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
final demo