jquery - 如何在我的表格的 x 轴上应用水平滚动条？

Question

我注意到有一些不同的方法可以做到这一点，以及与 IE8 浏览器的一些差异。我有一个<table>包含表格的表格。表格的宽度可能为 500 像素或 1500 像素，具体取决于列。

我怎样才能做到这一点，当表格宽度大于 div 外部容器时，滚动条会出现在底部。我还需要将此表包含在 DIV 中以使其工作吗？

<table id="dataTable">
 xxx
</table>

Answer 1

您可以尝试overflow-x属性：

<div id='wrapper'>
   <table id="dataTable">
     ...
   </table>
</div>

#wrapper {
    overflow-x: scroll;
    width: 800px;
}

Answer 2

你可以这样做，

现场演示

<div id="div1" class="div-scroll">
<table style="width:300px">
    <tr>
        <td > col1 </td>
        <td > col2</td>
        <td > col3</td>
    </tr>    
</table>    
</div>​

Answer 3

CSS：

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

html:

<div>
    <table id="test">
    <tr>
        <td>Hello</td>
        <td>Hello2</td>
    </tr>
    </table>
</div>​

jsfiddle：http: //jsfiddle.net/pXx7K/1/

​</p>