Table won't overflow

Question

I have a table with a variable number of columns that I want to place in a fixed width div.

I want the table columns to have a fixed width and the table to overflow horizontally inside the div if it gets too wide.

However the table seems to resize itself to fit inside the div.

<style>
table,td{
    border:1px solid black;
}
</style>
<div style="overflow:auto;width:500px;border: 1px solid red">

<table>
<tr>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
</tr>
</table>

</div>

I can hack around this by setting the table to a fixed width greater than the div. But the table has a variable number of columns so I would rather not do this.

Is there a better way?

Thanks for any suggestions.

Hmmm... I don't really see an easy solution for this one. The point of tables is so that the browser does all the heavy lifting (ie. resizing cells, fitting the table nicely into whatever space that's available, etc.) for you, so if you don't define a size, then the browser will just force the table into that space for you. — Yi Jiang
– Yi Jiang, Commented Sep 24, 2010 at 10:10

Loïc Février · Accepted Answer · 2010-09-24 10:14:38Z

1

You can use

<table>
<tr>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
</tr>
</table>

But I might have problems for IE < 8.

answered Sep 24, 2010 at 10:14

Loïc Février

7,7909 gold badges44 silver badges52 bronze badges

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

1 Comment

Chris Over a year ago

Unfortunatley I need to support IE6 and IE7 too

colithium · Accepted Answer · 2010-09-24 10:13:58Z

0

You're going to have set an explicit width on the table (use CSS for this of course). Presumably, if the columns are generated dynamically, it wouldn't be too hard to compute the width dynamically either. You'll have to use inline CSS but oh well, this is a proper case for it.

answered Sep 24, 2010 at 10:13

colithium

10.3k6 gold badges44 silver badges59 bronze badges

Collectives™ on Stack Overflow

Table won't overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related