You may use div
and ul
,li
instead of table td tr
like
Demo
HTML
<table id="outerTable">
<tr>
<td style="vertical-align:top;"><div>
<div class="fixed">
<ul>
<li class="cell">One</li>
<li class="cell">Two</li>
<li class="cell">Three</li>
<li class="cell">Four</li>
<li class="cell">Five</li>
<li class="cell">Six</li>
<li class="cell">Seven</li>
<li class="cell">Eight</li>
<li class="cell">Nine</li>
<li class="cell">Ten</li>
</ul>
<ul>
<li class="cell">One</li>
<li class="cell">Two</li>
<li class="cell">Three</li>
<li class="cell">Four</li>
<li class="cell">Five</li>
<li class="cell">Six</li>
<li class="cell">Seven</li>
<li class="cell">Eight</li>
<li class="cell">Nine</li>
<li class="cell">Ten</li>
</ul>
</div>
</div></td>
<td style="vertical-align:top;"><div style="width:230px; overflow-x:scroll;">
<div class="scrolling">
<ul>
<li class="cell">One</li>
<li class="cell">Two</li>
<li class="cell">Three</li>
<li class="cell">Four</li>
<li class="cell">Five</li>
<li class="cell">Six</li>
<li class="cell">Seven</li>
<li class="cell">Eight</li>
<li class="cell">Nine</li>
<li class="cell">Ten</li>
</ul>
<ul>
<li class="cell">One</li>
<li class="cell">Two</li>
<li class="cell">Three</li>
<li class="cell">Four</li>
<li class="cell">Five</li>
<li class="cell">Six</li>
<li class="cell">Seven</li>
<li class="cell">Eight</li>
<li class="cell">Nine</li>
<li class="cell">Ten</li>
</ul>
</div>
</div></td>
</tr>
</table>
CSS
.scrolling {
overflow-x: scroll;
}
.cell {
height:35px;
padding-right:3px;
}
ul{display: -webkit-inline-box;
list-style-type: none;
height: 20px;
padding:0;
}