Achieveing same with's in td like as in th

HTML & CSS
1

hey folks, i m working on a table, its scrollabe. but i am having hard time aligning things, it should align coz the td and th widths are same but they not aligning. here is the code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bx{margin:50px 0 0 2%;height:300px;width:1020px; background:#d5e5f0; position:relative; padding-top:60px; margin-top:10px; overflow:hidden;}
.scroll-Data{height:50px; width:100%; overflow:auto;}
thead{position:absolute; top:0px; height:30px; width:1001px;}
th.part,.desc,.mfc,.unit,.unit,.qty,.total{ text-align:center;border:1px solid #09C;}
th.part{width:120px;}
th.desc{width:400px;}
th.mfc{width:175px;}
th.unit{width:175px;}
th.qty{width:50px;}
th.total{width:175px;}
td.part,.desc,.mfc,.unit,.unit,.qty,.total{ text-align:center;border:1px solid #09C;}
td.part{width:120px;}
td.desc{width:400px;}
td.mfc{width:175px;}
td.unit{width:175px;}
td.qty{width:50px;}
td.total{width:175px;}
</style>
</head>

<body>
<div class="bx">
	<div class="scroll-Data">
        <table>
            <thead>
                <tr>
                    <th class="part"><p>Part No.</p></th>
                    <th class="desc"><p>Description</p></th>
                    <th class="mfc"><p>Manufacture</p></th>
                    <th class="qty"><p>Qty. Ordered</p></th>
                    <th class="qty"><p>Qty. Approved</p></th>
                    <th class="total"><p>Total</p></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="part">aaa</td>
                    <td class="desc">aaa</td>
                    <td class="mfc">aaa</td>
                    <td class="qty">aaa</td>
                    <td class="qty">aaa</td>
                    <td class="total"></td>
                </tr>
                <tr>
                    <td class="part">bbb</td>
                    <td class="desc">bbb</td>
                    <td class="mfc">bbb</td>
                    <td class="qty">bb</td>
                    <td class="qty">bb</td>
                </tr>
                <tr>
                    <td class="part">vvvvvvv</td>
                    <td class="desc">ccccccccccc</td>
                    <td class="mfc">cccccccccccc</td>
                    <td class="qty">cccccccccccc</td>
                    <td class="qty">ccccccccccccc</td>
                </tr>
                <tr>
                    <td class="part">aaa</td>
                    <td class="desc">aaa</td>
                    <td class="mfc">aaa</td>
                    <td class="qty">aaa</td>
                    <td class="qty">aaa</td>
                </tr>
                <tr>
                    <td class="part">bbb</td>
                    <td class="desc">bbb</td>
                    <td class="mfc">bbb</td>
                    <td class="qty">bb</td>
                    <td class="qty">bb</td>
                </tr>
                <tr>
                    <td class="part">vvvvvvv</td>
                    <td class="desc">ccccccccccc</td>
                    <td class="mfc">cccccccccccc</td>
                    <td class="qty">cccccccccccc</td>
                    <td class="qty">ccccccccccccc</td>
                </tr>
             </tbody>
        </table>
     </div>
 </div>    
</body>

where am i going wrong?

2

Your table is laid out using pixels for measurements. That means that the browser will, as far as possible, try to stick to those exact measurements. If people have got slightly different settings or are using a different browser, that probably won’t be a problem - it might be that some cells end up wrapping onto a second line where you weren’t expecting them to, but apart from that, no big deal.

The big deal comes when people have their font size set much larger than you do. A significant minority of people have problems with their eyesight, and so use a much larger text size than would be considered “normal”. Because your table is set to stay the same size even when the size of the text changes, it can end up messy if you end up with text that doesn’t fit in the cells.

3

i am following Paul’s scrollable table technique with fixed header. that’s why i have that positioned element. though i m new at positioning. (understand it)i didn’t understand what you said about when you said if they enlarge the text size, it make a mes of the table.how will it make mess on table?

4

The reason they are not aligning is because you’ve absolutely positioned the <thead>, which takes it out of the structure of the table. Get rid of the absolute positioning and it sits inside the table, and things line up nicely.

Some other thoughts: you’ve got a load more markup and code than you need there.

You don’t need a class on any of the <td>s. All the styling except the width could just be applied to “th, td {…}”, and then it will apply to all table header and data cells without the need to specify it for each and every possible class.

You only need to put a width for one cell in each column. If you do it on the <th>, that’s the easiest way to make sure it works out right. All the <td>s in the same column will inherit the width of the <th> at the top.

Do you need to set the dimensions so absolutely? What if a user has a narrower screenspace than 1001px? If they enlarge the text size, will it make a mess of the table? In other words, could you specify the size in % or em instead? (maybe constrained with a max-width to stop the table getting too big)

5

A couple of your CSS lines are wrong

th.part,.desc,.mfc,.unit,.unit,.qty,.total{ text-align:center;border:1px solid #09C;}

should read


th.part,th.desc,th.mfc,th.unit,th.unit,th.qty,th.total{ text-align:center;border:1px solid #09C;}

and

td.part,.desc,.mfc,.unit,.unit,.qty,.total{ text-align:center;border:1px solid #09C;}

should read

td.part,td.desc,td.mfc,td.unit,td.unit,td.qty,td.total{ text-align:center;border:1px solid #09C;}
6

So that was it? It shouldn’t be the cause of mis alignment between th and tds