Very simple problem

[eddy556]

I have the following HTML code which exists of two tables.  One table is to act as the header, the other as the body.  It is like this by design.  My problem is even though every cell has its width set - the two tables do not line up....

 

            <table id="ctl00_ContentPlaceHolder1_Table1" style="border-collapse: collapse;" border="1" cellspacing="0">
<tbody><tr>
	<td id="ctl00_ContentPlaceHolder1_mtrlcodeheader" style="width: 50px;">
        <a id="ctl00_ContentPlaceHolder1_lnkSortCode" title="Sort by Material Code: Click once to sort acsending, again for decscending" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lnkSortCode','')">Code</a>

        </td>
	<td id="ctl00_ContentPlaceHolder1_tradename" style="width: 210px;">
        <a id="ctl00_ContentPlaceHolder1_lnkTradeName" title="Sort by Trade Name: Click once to sort acsending, again for decscending" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lnkTradeName','')">Trade Name</a>
        </td>
	<td id="ctl00_ContentPlaceHolder1_keyword" style="width: 130px;">
        <a id="ctl00_ContentPlaceHolder1_lnkKeyWord" title="Sort by Keyword: Click once to sort acsending, again for decscending" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lnkKeyWord','')">Keyword</a>
        </td>
	<td id="ctl00_ContentPlaceHolder1_supp" style="width: 250px;">

        <a id="ctl00_ContentPlaceHolder1_Supplier" title="Sort by Company: Click once to sort acsending, again for decscending" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Supplier','')">Company</a>
        </td>
	<td id="ctl00_ContentPlaceHolder1_chkbx" style="width: 54px;">
        
        </td>
</tr>
</tbody></table>

    <!-- Height="149px" -->
    
    <div>

<table id="ctl00_ContentPlaceHolder1_GridView2" style="border-collapse: collapse;" rules="all" border="1" cellspacing="0">
	<tbody><tr style="text-decoration: none;" onmouseover="javascript:setMouseOverColor(this);" onmouseout="javascript:setMouseOutColor(this);">
		<td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl02$ctl00','')" style="background-color: Yellow; width: 50px;">604</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl02$ctl00','')" style="width: 210px;">WD-40 BULK LIQUID</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl02$ctl00','')" style="width: 130px;">Lubricant (Solvent)</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl02$ctl00','')" style="width: 250px;">WD-40 COMPANY</td><td style="width: 27px;">
                
                    <!--<asp:ImageButton ID="ImageButtonWorkArea" Height="27px" ImageUrl="~/Images/close-48x48.png"
                    CommandName="AddtoWorkArea" />-->
                    
                    <a href="#"><img class="addAssessmentImage" src="/Images/close-48x48.png" alt="add assessment" height="27"></a>
                    <!--.addAssessmentImage-->
                        
                </td><td style="width: 27px;">

                        <input name="ctl00$ContentPlaceHolder1$GridView2$ctl02$ImageButton1" id="ctl00_ContentPlaceHolder1_GridView2_ctl02_ImageButton1" src="Images/delete-48x48.png" style="border-width: 0px; height: 27px;" type="image">
                    </td>
	</tr><tr style="text-decoration: none;" onmouseover="javascript:setMouseOverColor(this);" onmouseout="javascript:setMouseOutColor(this);">
		<td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl03$ctl00','')" style="background-color: Red; width: 50px;">1947</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl03$ctl00','')" style="width: 210px;">LUBRICANT GEL</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl03$ctl00','')" style="width: 130px;">Lubricant</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl03$ctl00','')" style="width: 250px;">DURAPIPE GLYNWED PLASTICS LTD</td><td style="width: 27px;">
                
                    <!--<asp:ImageButton ID="ImageButtonWorkArea" Height="27px" ImageUrl="~/Images/close-48x48.png"
                    CommandName="AddtoWorkArea" />-->
                    
                    <a href="#"><img class="addAssessmentImage" src="/Images/close-48x48.png" alt="add assessment" height="27"></a>
                    <!--.addAssessmentImage-->

                        
                </td><td style="width: 27px;">
                        <input name="ctl00$ContentPlaceHolder1$GridView2$ctl03$ImageButton1" id="ctl00_ContentPlaceHolder1_GridView2_ctl03_ImageButton1" src="Images/delete-48x48.png" style="border-width: 0px; height: 27px;" type="image">
                    </td>
	</tr><tr style="text-decoration: none;" onmouseover="javascript:setMouseOverColor(this);" onmouseout="javascript:setMouseOutColor(this);">
		<td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl04$ctl00','')" style="background-color: Red; width: 50px;">159171</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl04$ctl00','')" style="width: 210px;">MOTEX STEAM CLEAN DETERGENT</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl04$ctl00','')" style="width: 130px;">Detergent</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl04$ctl00','')" style="width: 250px;">JAYGRADE LTD.</td><td style="width: 27px;">
                
                    <!--<asp:ImageButton ID="ImageButtonWorkArea" Height="27px" ImageUrl="~/Images/close-48x48.png"
                    CommandName="AddtoWorkArea" />-->
                    
                    <a href="#"><img class="addAssessmentImage" src="/Images/close-48x48.png" alt="add assessment" height="27"></a>

                    <!--.addAssessmentImage-->
                        
                </td><td style="width: 27px;">
                        <input name="ctl00$ContentPlaceHolder1$GridView2$ctl04$ImageButton1" id="ctl00_ContentPlaceHolder1_GridView2_ctl04_ImageButton1" src="Images/delete-48x48.png" style="border-width: 0px; height: 27px;" type="image">
                    </td>
	</tr><tr style="text-decoration: none;" onmouseover="javascript:setMouseOverColor(this);" onmouseout="javascript:setMouseOutColor(this);">
		<td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl05$ctl00','')" style="background-color: Red; width: 50px;">154903</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl05$ctl00','')" style="width: 210px;">EASY FINISH</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl05$ctl00','')" style="width: 130px;">Aerosol</td><td onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView2$ctl05$ctl00','')" style="width: 250px;">ADVANCED ENGINEERING LTD.</td><td style="width: 27px;">
                
                    <!--<asp:ImageButton ID="ImageButtonWorkArea" Height="27px" ImageUrl="~/Images/close-48x48.png"
                    CommandName="AddtoWorkArea" />-->

                    
                    <a href="#"><img class="addAssessmentImage" src="/Images/close-48x48.png" alt="add assessment" height="27"></a>
                    <!--.addAssessmentImage-->
                        
                </td><td style="width: 27px;">
                        <input name="ctl00$ContentPlaceHolder1$GridView2$ctl05$ImageButton1" id="ctl00_ContentPlaceHolder1_GridView2_ctl05_ImageButton1" src="Images/delete-48x48.png" style="border-width: 0px; height: 27px;" type="image">
                    </td>
	</tr>
</tbody></table>

[Maq]

Why don't you put everything in 1 table and use the proper

tags for headers?

 

Then you don't have to worry about lining up 2 separate tables.

[eddy556]

Like I said this way it by design.  Its becuase the bottom table is able to be scrolled whilst keeping the header (first table) static - i.e. the user can always see the header no matter which record they are viewing.