我想创建一个表中有n列的表。由于有许多相同性质的列,因此要求它们在它们之间滚动。下面的图片将使它干净。
此处模型需要滚动条,该滚动条仅滚动表格中的模型。 如何使用HTML表格实现这样的结果。
答案 0 :(得分:1)
我试过这样请检查这个小提琴:
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>
</ul>
<ul>
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</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 class="col3">
<ul>
<li>one</li>
</ul>
<ul>
<li>one</li>
</ul>
</div>
<div style="clear:both;">
</div>
</div>
</div>
</div>
CSS:
li{display:inline;margin-right:10px;}
.tbl{display:table;width:20%;}
.row{display:table-row;}
.cell{display:table-cell;width:100%;}
.w{width:20%;}
.col {display:table-cell;}
.col1{width:50%;float:left;}
.col2{width:20%;float:left;overflow-x:scroll;}
.col3{width:30%;float:right;}
.innerdiv{width:500px;}