问题
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>
回答1:
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
回答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;
}
回答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>
来源：https://stackoverflow.com/questions/21777483/how-to-add-horizontal-scroll-bar-to-specific-columns-of-html-table-without-using