jquery - テーブルの x 軸に水平スクロール バーを適用するにはどうすればよいですか?

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

このようにできます。

ライブデモ

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