Question

I’m implementing a table with a fixed header using this kind of setup:

<div style='padding-right:18px'><!-- to account for the scrollbar on the other div -->   <table id='head'>     <tr>        <th>Col 1</th>        <th>Col 2</th>     </tr>   </table> </div> <div style='height:400px; overflow-y:scroll'>   <table id='body'>     <tr>        <td>Val 1a</td>        <td>Val 2a</td>     </tr>     <tr>        <td>Val 1b</td>        <td>Val 2b - this cell is wide</td>     </tr>   </table> </div> 

I’m using dojo thus to make the column widths the same after the page loads:

dojo.addOnLoad(function(){     var $bodyRow = dojo.query('#body tr')[0];     var $headRow = dojo.query('#head tr')[0];     dojo.forEach($bodyRow.cells, function(item, index){         var w = item.offsetWidth;         dojo.style($headRow.cells[index], 'width', w + 'px');     }); }); 

Unfortunately, although the widths are adjusting, they’re not adjusting enough to line up. Anyone know why this isn’t working? or a better way? Note: this must work in IE6.

Answer 1

offsetWidth gets the width of the element, padding and borders. setting the width using the element style, you are only setting the width of the element so each column will be off by the sum of all the horizontal borders and paddings of preceding columns

try this

dojo.addOnLoad(function(){     var $bodyRow = dojo.query('#body tr')[0];     var $headRow = dojo.query('#head tr')[0];     dojo.forEach($bodyRow.cells, function(item, index){             var w = dojo.style($bodyRow.cells[index], 'width');             dojo.style($headRow.cells[index], 'width', w + 'px');     }); }); 

-Enrico