Question

我有一个HTML表格。我想保持表格的前10列固定，并将水平滚动条添加到表格中的其余列。为实现这一点，我尝试了很多方法。但最终我不得不在表格中使用表格，我想避免使用。没有在表格中使用表格，任何人都可以在这方面帮助我。供你参考我在这里给jsFiddle的链接。如果您需要任何进一步的信息，我可以提供相同的信息。提前致谢。等待你的回复。 jsFiddle链接如下：

http://jsfiddle.net/zgNMT/1/

HTML代码如下：

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

Answer 1

您可以使用thead作为固定列，使用tbody作为滚动块，使用以下CSS：

table thead, table tbody {
    display:inline-block;
}

table tbody {
    width: 100px;
    overflow-x: scroll;
}

你会得到类似的东西：DEMO

Answer 2

您可以使用div和ul，li代替table td tr

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

Answer 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>

如何在不使用表格的情况下将水平滚动条添加到HTML表格的特定列？

3 个答案: