如何創建表格的兩個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;}