如何创建表格的两个TD之间的滚动

Question

我想创建一个表格，其中有n个列表。由于有许多相同性质的列，因此要求在它们之间滚动。下面的图片将使其清洁。

这里模型需要一个滚动条，它只会滚动表中的模型。 如何用HTML表格实现这样的结果。

Answer 1

我试过这样请检查这一个小提琴：

jsFiddle

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