CODEWITHSUNDEEP
htmlcss
niklodeon
niklodeon

Reputation: 1380

Scrollable div with html table

I have a table inside a div with scrollbars.

There are some columns in the table with width defined. Till then table headers are fine.

But when I add more columns to grid the header test gets wrapped which i don't want, instead i want horizontal scroll to come.

Normal : http://jsfiddle.net/hVRW7/

More Columns : http://jsfiddle.net/hVRW7/1/

Upvotes: 0

Views: 162

Answers (2)

Bradley A. Tetreault
Bradley A. Tetreault

Reputation: 464

Your issue is that you have defined a limit of 1024px to the width of the table and then you are defining new columns with a total width that adds up to 1430px. All browsers are then trying to do their best to make the information fit within the defined width of 1024px. Since in your given example you are just repeatedly defining the same sets of columns are you sure you need all of them? If not you should narrow them down to only the ones needed and then determine your actual overall width. The defined width of the overall table will take precedence over individual widths in determining the maximum width of the table.

Upvotes: 0

moonwave99
moonwave99

Reputation: 22817

The quickest fix is to wrap <th>'s labels in spans, then give fixed width to them:

<table>
    <thead>
        <tr>
            <th><span>Label1</span></th>
            <th><span>Label2</span></th>            
        </tr>
    </thead>
</table>

Then style as:

th span
{

    display:inline-block;
    width:300px; /* or what you wish */

}

EDIT see fiddle.

Upvotes: 1

Related Questions