Question

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

如何使表格宽度大于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

你可以这样做，

<强> Live Demo

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

如何在x轴上为我的桌子应用水平滚动条？

3 个答案: