CODEWITHSUNDEEP
css
lcazarre
lcazarre

Reputation: 743

CSS - how to prevent this table from overflowing?

I have designed a webpage to retrieve stock information from Yahoo Finance, using Javascript. I now have issues to format the table, as the table contains too many columns to display on screen.

What I would like to achieve is to let the user scroll the table to see the columns / rows beyond predefined limits.

I tried to combine the use of these formats, to no avail:

#stockDataTable {
    max-width:600px;
    table-layout: fixed;
    overflow-x: scroll;
    overflow-y: scroll;
}

Would you have any suggestions to format the table?

I have saved the html and css code in jsfiddle.net: http://jsfiddle.net/lcazarre/PCW6F/

Thanks, LC

Upvotes: 0

Views: 59

Answers (2)

Omar Himada
Omar Himada

Reputation: 2588

HTML:

<div id="wrap-table">
    <table id="stockDataTable">
        ...
    </table>
</div>

CSS:

#wrap-table {
    overflow:scroll;

    /* Add some padding so the scrollbar isn't overlapping the table */
    padding-bottom:10px; 
}

Upvotes: 1

2ndkauboy
2ndkauboy

Reputation: 9377

You can't prevent a table from growing in width, but you could simple insert into a DIV with a fixed width and overflow: scroll on the DIV.

Upvotes: 3

Related Questions