How to add a horizontal scrollbar to specific columns of an HTML table without using a table in a table in the following scenario?

Question

I have an HTML table. I want to keep the first 10 columns of the table fixed and add a horizontal scrollbar to the rest of the columns from the table. I have tried many ways to achieve this. But in the end I had to use a table inside the table, which I want to avoid. Can anyone help me in this regard without using the table inside the table. For your link, I give here the jsFiddle link. If you need more information, I can provide you with the same. Thank you in advance. Waiting for your answers. The jsFiddle link looks like this:

http://jsfiddle.net/zgNMT/1/

The HTML code is as follows:

<table id="outerTable"> <tr> <td style="vertical-align:top;"><div> <table class="fixed"> <tr> <td class="cell">One</td> <td class="cell">Two</td> <td class="cell">Three</td> <td class="cell">Four</td> <td class="cell">Five</td> <td class="cell">Six</td> <td class="cell">Seven</td> <td class="cell">Eight</td> <td class="cell">Nine</td> <td class="cell">Ten</td> </tr> <tr> <td class="cell">One</td> <td class="cell">Two</td> <td class="cell">Three</td> <td class="cell">Four</td> <td class="cell">Five</td> <td class="cell">Six</td> <td class="cell">Seven</td> <td class="cell">Eight</td> <td class="cell">Nine</td> <td class="cell">Ten</td> </tr> </table> </div></td> <td style="vertical-align:top;"><div style="width:230px; overflow-x:scroll;"> <table class="scrolling"> <tr> <td class="cell">One</td> <td class="cell">Two</td> <td class="cell">Three</td> <td class="cell">Four</td> <td class="cell">Five</td> <td class="cell">Six</td> <td class="cell">Seven</td> <td class="cell">Eight</td> <td class="cell">Nine</td> <td class="cell">Ten</td> </tr> <tr> <td class="cell">One</td> <td class="cell">Two</td> <td class="cell">Three</td> <td class="cell">Four</td> <td class="cell">Five</td> <td class="cell">Six</td> <td class="cell">Seven</td> <td class="cell">Eight</td> <td class="cell">Nine</td> <td class="cell">Ten</td> </tr> </table> </div></td> </tr> </table> 

Answer 1

You can use thead for your fixed column and tbody for the scroll block with the following CSS:

 table thead, table tbody { display:inline-block; } table tbody { width: 100px; overflow-x: scroll; } 

You will get something like this: DEMO

Answer 2

You can use div and ul , li instead of table td tr as

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; } 

Answer 3

 Using Div Structure Your CSS li{display:inline;margin-right:10px;} .tbl{display:table;width:60%;} .row{display:table-row;} .cell{display:table-cell;width:100%;} .w{width:30%;} .col {display:table-cell;} .col1{width:50%;float:left;} .col2{width:50%;float:left;overflow-x:scroll;} .innerdiv{width:500px;} Your HTML <div class="tbl"> <div class="row"> <div class="cell"> <div class="col col1"> <ul> <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li> <li>Eight</li><li>Nine</li><li>Ten</li> </ul> <ul> <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li> <li>Eight</li><li>Nine</li><li>Ten</li> </ul> </div> <div class="col col2"> <div class="innerdiv"> <ul> <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li> <li>Eight</li><li>Nine</li><li>Ten</li> </ul> <ul> <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li> <li>Eight</li><li>Nine</li><li>Ten</li> </ul> </div> </div> <div style="clear:both;"> </div> </div> </div> </div>