how to make same size of width of <td> in two table?

How to make the width of yellow background fit to the width of gray background at http://plekz.com/home.php ?

my current code :

    <table style="width:920px;"> 
         //yellow background tr for header of table
    </table>

<div style="overflow:auto; height:500px; border-bottom:1px blue solid; width:940px;">
    <table style="width:920px;">
        //gray background tr for body of table
    </table>
</div>

i don't want to wrap table header in an overflow div, I just want to wrap table body in an overflow div. How to do that in a single table? if can't do in single table, then i do in two different tables, the width of td will be different if do in two table, I have tried to put in width:920px to both table, its doesn't help.

Updated answer : Finally I manage to fix the proble开发者_运维技巧m by myself. I think the problem happen because width of table is not enough to hold all <td>, so it auto reduce width of any 1 or 2 <td> in table 1 and table 2. We can't decide which <td> to be reduced its width, html/css random pick any <td> to be reduced its width. So the solution to the problem is to increase the width for the 2 tables from 920px to 1000px.

---

Can't you just add an class to each <table> and set a width in css? Something like this:

HTML:

<div style="width:920px;">
    <table class='myclass'> 
         //table title with yellow background
    </table>
</div>
<div style="overflow:auto; height:500px; border-bottom:1px blue solid; width:940px;">
    <table class='myclass'>
        //table records with gray background
    </table>
</div>

CSS:

.myclass {
    width: 920px;
}

---

use one table, for header use thead and for body tbody

---

Not 100% sure what you're asking but have you tried using for the yellow header cells and grey for rest of the cells. That way you'll only require on table and ensure they're always the same width?

<table> 
        <tr>
            <th></th> // Yellow th cells
        </tr>
        <tr>
            <td></td> // Gret td cells
        </tr>
        <tr>
            <td></td> // Gret td cells
        </tr>
</table>

---

I think you just need to use CSS to hard code the width of your table cells...

Put the following in your stylesheet:

table td { width: 50px /* Change to whatever you want */ }