CODEWITHSUNDEEP
jqueryhtmlcss
Alan2
Alan2

Reputation: 24592

How can I apply a horizontal scroll bar on the x axis for my table?

I noticed there are some different ways to do this and some differences with the IE8 browser. I have a <table> that contains a table. The table might have a width of 500px or 1500px depending on the columns.

How can I make it so that when the table width is bigger than the div outer container that a scrollbar appears along the bottom. Also do I need to enclose this table in a DIV to make it work? 

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

Upvotes: 0

Views: 1438

Answers (3)

Adil
Adil

Reputation: 148160

You can do it like this,

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

Upvotes: 1

Ram
Ram

Reputation: 144719

You can try overflow-x property:

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


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

Upvotes: 3

mash
mash

Reputation: 15229

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/

​

Upvotes: 0

Related Questions