0

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.

Justin
  • 26,443
  • 16
  • 111
  • 128

3 Answers3

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/

Philip Newcomer
  • 26
  • 5
  • 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 http://jsfiddle.net/94g53edb/7/ – Justin Aug 13 '14 at 21:47
  • @Justin you could add `td { width: 100%; }` but that will expand just the first td. – azeós Aug 13 '14 at 21:53
  • 1
    @Justin `td { width: 1%; }` seems to make the trick. At least in Firefox. – azeós Aug 13 '14 at 21:57
  • 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? – Justin Aug 13 '14 at 22:00
  • 1
    @Justin I used it like a hack several times, here's an explanation: http://stackoverflow.com/questions/21130221/how-are-display-table-cell-widths-calculated – azeós Aug 13 '14 at 22:06
  • I can't post more than two links since my rep is still too low, so here are the fiddles for narrow and wide content demos using `td { width: 1%; }`: – Philip Newcomer Aug 13 '14 at 22:25
  • I don't think there is a solution that doesn't require any extra markup and still works in obsolete browsers. This works in all the modern browsers I've tested. – Philip Newcomer Aug 13 '14 at 22:51
  • Fair enough. IE 10+ works with the 1% hack. I'll accept your answer tomorrow if I don't get any better answers. – Justin Aug 13 '14 at 23:07
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:

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

or

  1. You can create another wrapper for the table.

:)

Al Kush
  • 278
  • 3
  • 15
  • 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. – Justin Aug 13 '14 at 21:53
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/

Philip Newcomer
  • 26
  • 5