How to get overflow:auto behavior with HTML table

Question

Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?

I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).

Example: See JSFiddle Demo.

CSS:

<style>
#wrapper {
    width: 250px;
    /* looking for solution that doesn't use overflow auto here */
}
table {
    border-collapse: collapse;
}
td {
    border:1px solid #ccc;
    padding: 3px;
}
</style>

HTML:

<div id="wrapper">
    <p>Table should scroll, but not this text.</p>
    <table>
        <thead>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>..</td>
                <td>..</td>
                <td>....................................................................................</td>
            </tr>
            <tr>
                <td>..</td>
                <td>..</td>
                <td>..</td>
            </tr>
        </tbody>
    </table>    
</div>

Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.

Philip Newcomer · Accepted Answer · 2014-08-13 22:24:17Z

1

You can use overflow: scroll on the table itself if you make it display as block:

table {
    display: block;
    overflow: scroll;
}

Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.

Fiddle: http://jsfiddle.net/94g53edb/12/

edited Aug 13, 2014 at 22:24

answered Aug 13, 2014 at 21:46

Philip Newcomer

265 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Justin Over a year ago

This makes the table lose its 100% width if the content is shorter. I am applying the style to a variety of tables so some will have long content and others short. See jsfiddle.net/94g53edb/7

azeós Over a year ago

@Justin you could add td { width: 100%; } but that will expand just the first td.

azeós Over a year ago

@Justin td { width: 1%; } seems to make the trick. At least in Firefox.

Justin Over a year ago

It works for me on Chrome but I'm squemish to use a hack like that without knowing why it works. Do you know what's happening to make it stretch with a 1% width?

azeós Over a year ago

@Justin I used it like a hack several times, here's an explanation: stackoverflow.com/questions/21130221/…

|

Al Kush · Accepted Answer · 2014-08-13 21:45:02Z

0

I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:

You can set the <p> to the fixed position,

or

You can create another wrapper for the table.

:)

answered Aug 13, 2014 at 21:45

Al Kush

2884 silver badges15 bronze badges

1 Comment

Justin Over a year ago

Since the content is variable inside the wrapper, setting it to fixed position would not be a reliable solution. Your second answer is what I said I'm trying to avoid.

Philip Newcomer · Accepted Answer · 2014-08-13 22:12:02Z

0

[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]

Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.

Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/

Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/

answered Aug 13, 2014 at 22:12

Philip Newcomer

265 bronze badges

1 Comment

Justin Over a year ago

I like the concept but the <td> widths are all variable.

Collectives™ on Stack Overflow

How to get overflow:auto behavior with HTML table

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related