Search code examples
htmlcsshtml-table

Prevent a table in overflow:auto div from shrinking

I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.

This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:

<div style="width: 1000px; overflow-x: auto;">
    <table>
        <tr>
            <td style="width:400px;">
                This
            </td>
            <td style="width:400px;">
                Should
            </td>
            <td style="width:400px;">
                Scroll!
            </td>
        </tr>
    </table>
</div>

Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?

Solution

  • Works if you set the width on the table itself.

    <table style="width:1200px;">

    The td will always shrink to the necessary size, they won't push the table wider in that situation.