I'm trying to align two tables (the first one is a gridview). The reason is that I'm going to place filtering controls in the lower one, and it just looks better if the columns are aligned.
At the moment, I can do it fine (more or less) in IE, but it doesn't work at all in FF. Any ideas?
tiwas
Member
128 Points
266 Posts
Javascript: problems changing td width in FF 3.x and 4.0b7
Nov 26, 2010 09:35 AM|LINK
Hi guys,
I'm trying to align two tables (the first one is a gridview). The reason is that I'm going to place filtering controls in the lower one, and it just looks better if the columns are aligned.
At the moment, I can do it fine (more or less) in IE, but it doesn't work at all in FF. Any ideas?
Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Untitled Page </title></head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="hU7RWoMOVdImWdi9J703zCvxE3cZpIeM6JmYyVUU3ySoXM6Y/HITrXVZXVYIbbw0FEsgNcHl3nNt7T91X4DnyLjOzdKR80x6MNkzWk8SzGCHQOUVN6iqs9L7NX+J/ILDHio6bVOB65l1x6/gxHypfKA8mIAgFrb91ivkeumXNTJ3AUMCSyKNYtSMgm7Wte+Z0HCmv2fq5kXErgFVRroS8wQk+pVbIx874Y++vqIijDTsOyNZpcymAFY33b6cGW48JvEvocf27ruymAvNbXyIH+zzcmxwS3agwzWXzkntmAElsJTvWqo2Jux+9Nt0nd220Q+Zi132LrIZCC/5YJHp0dav2Yi1dq77PLwcKZS/p7lTf63cQFaWje9Y/4855U35b+nJSHPOWaSnggEhk54ZBTIOACpWYhXZAUVnW7dxlKfdN2a7JjK0oiCYjDfOJWF7A2GP4tZkjKRJLWI8peTmljCyKXv4BuX/OT4+B+hzYg3jrHRXrQQMQC7zVvDgNs1Kshw4KY3QVHFEJ9pI4E5XY+9CRBsVZGSmTg7uWDidV/xMscDTLZlWqgbNho16xVZ2Q95jjzCnUu/uoO3khZ0Bkmb0t01DQ5gu1dbotEWyOGZernZpX7v0xbWtxbsTj1t7ZTyqzn7DkTrtuvqCmExd2Lr6EwlKZQy8ygUA5PycN9WE0GU9Z12EHh+DmhEKNmqDhIqJ2tncdtG7GB1BCY5Tcq+u4+e/fJAUxqScWb0R6SJyTwnJShntjjXX6SREmE4UJX6fd4m3CUykx/20ixFptikhFKCyqewZWq8FP1Y4+pv3C4MHJCpeclm9HXHMgYCXG7cBAn7RvTf0Go9XbdZ9J5ZFvve/rcMXIEJQOyPoFIC1DmwolpeznXdYOXYi8PIu+pJGLZgI82X7sgxOQ4f7dfzHAxeoait/NjLK9TuO0Ruii9a91SozcbsMowJrmzbTrXiJKe47+JGe/zJGyD0A3YAP93H62sYJNMAF+oPzTXHwmOjhKarc1us7lWxJrhA1wsRhls8VElJfbSntiEZvS8br3VqeAyr+fwT5NuIXFdSIrgD3zgyOhs0LW4msevEtN6EGtc5wzV2GNM+8RX/5P2tOgoF6LnBtLcRZvPGb5HD66k3aIHs4ZdlZbJLx0HZjpZShuvduBpRyNlachr50pxKxA7ieIwPH7odrmwLuRXcsDfh/VhThYac1/jQ/ydkdMdD7N8zkxsrnItSEF2nw8NHGTMQIVodYTUiLi5mVKbaLmCEqOgtt1h/f+0eR9389VAGrGajx78ucA0VbqRmbXjlP6Day+e27HRgyQYJ3EUSE/TBaFkEKYS4B5bzLSsGH3M/ij0uaLk0DdWDJ7ADJjWfKzDSl59Dyqr8YAzd81GwnsMLXfu70o/OWOAnxIfwEUgH52uCwHw6QXv3q5Aq9g8T3J/3ZKns021vVyPTg0i6KqmXJyfASUF9hstuKixdVZUDe9eos3OPSXQ/DTBR19IMahJNSTwiQmU8dN1LKv0I6iY9K5f4u2Pfd/JP3XqfSXYHgMcXxcHPN2epkmbrPjg7+kjv70p2CgiQZY838mD8Hjj3JRaZhcPxjcW1+WpaCtL2H3spFvhMGFAygy1dsIiya80eqiiuIJ/PBtsJSjeLikiFHczBwt1m3bC9n2WfVbasWtPVH/bWyI1FKIkJvxSLA4ZEwtFAy8g8A5LliJTkAPoCCFr261MPDk2hK9fGeKYZk3V8HdCd+iKrrVTh1cRCe6bCSpLYE3Ug1kjWXGMkN9N8KaVUd3z1+PmotRThg+yGjOuPoTivg3avNQ8RM25qHXCtoHp/dW7GrLIBLB3y8mF7sRfoj16yOioJ2zSux31votr2B4rzBxa05V3QT+UqFGwA=" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <div> <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="1m9E6avjWp1+6yM+AU9n5ffSfdhz6pD6CIxNwStOJ9CI8VKkiXAGpr/nUYjJRPLauDjw8j0HDB7aQxrv61c5MuWJM6qQyEnv6tjir0ftg6qlUv+rfSdeai/d7BlalD/NRAOEFRUO8CGnn67D7+/DeDhwkTsD7tZkpPr8Eajtpg/k4ASuL0yB4oDlb0wkMzs7SAv3m3sE2ks197RflqgU+XO2pnk=" /> </div> <div> Select Category <br /> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"> <option selected="selected" value="1">Beverages</option> <option value="2">Condiments</option> <option value="3">Confections</option> <option value="4">Dairy Products</option> <option value="5">Grains/Cereals</option> <option value="6">Meat/Poultry</option> <option value="9">Nothing Related</option> <option value="7">Produce</option> <option value="8">Seafood</option> </select> <br /> <br /> <div> <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;"> <tr> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$ProductName')">ProductName</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$QuantityPerUnit')">QuantityPerUnit</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$UnitPrice')">UnitPrice</a></th><th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$UnitsInStock')">UnitsInStock</a></th> </tr><tr> <td>Chang</td><td>24 - 12 oz bottles</td><td>19,0000</td><td>17</td> </tr><tr> <td>Guaraná Fantástica</td><td>12 - 355 ml cans</td><td>4,5000</td><td>20</td> </tr><tr> <td>Sasquatch Ale</td><td>24 - 12 oz bottles</td><td>14,0000</td><td>111</td> </tr><tr> <td>Steeleye Stout</td><td>24 - 12 oz bottles</td><td>18,0000</td><td>20</td> </tr><tr> <td>Côte de Blaye</td><td>12 - 75 cl bottles</td><td>263,5000</td><td>17</td> </tr><tr> <td>Chartreuse verte</td><td>750 cc per bottle</td><td>18,0000</td><td>69</td> </tr><tr> <td>Ipoh Coffee</td><td>16 - 500 g tins</td><td>46,0000</td><td>17</td> </tr><tr> <td>Laughing Lumberjack Lager</td><td>24 - 12 oz bottles</td><td>14,0000</td><td>52</td> </tr><tr> <td>Outback Lager</td><td>24 - 355 ml bottles</td><td>15,0000</td><td>15</td> </tr><tr> <td>Rhönbräu Klosterbier</td><td>24 - 0.5 l bottles</td><td>7,7500</td><td>125</td> </tr><tr> <td>Footer</td><td>Footer</td><td>Footer</td><td>Footer</td> </tr><tr> <td colspan="4"><table border="0"> <tr> <td><span>1</span></td><td><a href="javascript:__doPostBack('GridView1','Page$2')">2</a></td> </tr> </table></td> </tr> </table> </div> <table id="testTable"> <tr> <td> 0 </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table> </div> <script language="javascript" type="text/javascript"> var tableRow = document.getElementById('GridView1').rows[0]; var testTableRow = document.getElementById('testTable').rows[0]; for (var j=0; j<tableRow.cells.length; j++) { alert(tableRow.cells[j].style.width); testTable.cells[j].style.width = tableRow.cells[j].offsetWidth; } </script> </form> </body> </html>