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

Question

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

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

Answer 1

我试过这样请检查这个 fiddle :

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