html - In an html table, why doesn't header width change overall table width?

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>

​</p>

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

まず第一に、これはあなたが最近テーブルをスタイリングする方法ではありません

<table background='red'>

代わりにこれを使用してください

<table style="background:red;">

min-widthそして第二に、あなたはth代わりにを使用する必要がありますwidth

私のフィドル

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