How to add horizontal scroll bar to specific colum

Question

I've a HTML table. I want to keep the first 10 columns of the table fixed and add the horizontal scroll bar to the rest of columns from table. For achieving this I tried many ways. But ultimately I had to use table inside a table, which I want to avoid. Can anyone help me in this regard without using table inside a table. For your reference I'm giving here the link of jsFiddle. If you need any further information I can provide you the same. Thanks in advance. Waiting for your replies. The jsFiddle link is as follows:

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

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>

Answer 2

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

Answer 3

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

table thead, table tbody {
    display:inline-block;
}

table tbody {
    width: 100px;
    overflow-x: scroll;
}

You will get something like that: DEMO