Question

Check out this fiddle:
http://jsfiddle.net/foreyez/hQ9ZR/

<table background='red'>
<thead>
    <tr>
        <th style='width:3000px;background:red'>Students</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Joe</td>
    </tr>
    <tr>
        <td>Shmoe</td>
    </tr>
</tbody>

​

and the css is:

  html,body { overflow:auto; }

When I make the width of the Header 3000px I’d expect it to cause an overflow (scrollbar) in the page. But it doesn’t. It’s because the width of the header cell doesn’t change the overall table’s width.

If you set the width of the table to 3000px, you’ll see the overflow (scrollbar)

So basically, I’m wondering if there’s a way to make it so the table’s width is defined by it’s headers widths?

Thanks

Answer 1

First of all this is not the way you style tables these days

<table background='red'>

use this instead

<table style="background:red;">

And secondly you need to use min-width for th instead of width

My Fiddle

<th style='border: 1px solid #fffff0;min-width:5000px;background:red'>Students</th>