<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ColumnAlignmentTest.html</title>
<script language="JavaScript"><!--
function jsAlignColumns(){
// This function equates the widths of two sets of table cells: Col1 - Col9 and ColHead1 - ColHead9.
var col;
var colhead;
var colwidth;
var colheadwidth;
alert("Click to align column widths");
for (var i=1; i<10; i++){
col = document.getElementById("Col" + i);
colhead = document.getElementById("ColHead" + i);
colwidth = col.offsetWidth;
colheadwidth = colhead.offsetWidth;
if (colwidth < colheadwidth){colwidth = colheadwidth;}
colhead.style.pixelWidth = colwidth;
col.style.pixelWidth = colwidth;
}
}
//--></script>
<style type="text/css"><!--
body, div, layer, td, th{
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
.cssDataTable, .cssColHeadTable{
border-left: 1px solid darkblue;
}
.cssColHeadTable{
border-top: 1px solid darkblue;
border-bottom: 1px solid darkblue;
}
.cssColHead, .cssColEven, .cssColOdd{
border-right: 1px solid darkblue;
color: darkblue;
font-size: 8pt;
font-weight: normal;
padding: 3px 5px 3px 5px;
}
.cssColHead{
background-color: lightgrey;
}
.cssColEven{
border-bottom: 1px solid darkblue;
background-color: lightsteelblue;
}
.cssColOdd{
border-bottom: 1px solid darkblue;
background-color: goldenrod;
}
--></style>
</head>
<body onLoad="jsAlignColumns();">
<h1>Column alignment problem</h1>
The column heads are contained in one table.<br>
The data rows are in a second table, which itself is contained by a overflowing div (shown in yellow) that scrolls.<br>
The Javascript function jsAlignColumns() (reproduced below) sets corresponding columns in both tables equal to whichever is wider.<p>
<table class="cssColHeadTable" cellpadding=0 cellspacing=0 border=0>
<tr>
<th id="ColHead1" class="cssColHead" align=left nowrap>Cust No.</th>
<th id="ColHead2" class="cssColHead" align=left nowrap>Customer</th>
<th id="ColHead3" class="cssColHead" align=left nowrap>Invoice</th>
<th id="ColHead4" class="cssColHead" align=center nowrap>Order</th>
<th id="ColHead5" class="cssColHead" align=left nowrap>School/Style</th>
<th id="ColHead6" class="cssColHead" nowrap>Rec'd</th>
<th id="ColHead7" class="cssColHead" nowrap>Ack'd</th>
<th id="ColHead8" class="cssColHead" nowrap>Shipped</th>
<th id="ColHead9" class="cssColHead" align=center nowrap>Typist</th>
</tr>
</table>
<div style="
overflow: auto;
border-bottom: 1px solid black;
padding: 0;
width : 98%;
height: 200px;
background-color: yellow;
">
<table class="cssDataTable" cellpadding=0 cellspacing=0 border=0>
<tr>
<td id="Col1" class="cssColOdd" align=left>6200A</td>
<td id="Col2" class="cssColOdd" align=left>Acme Inc.</td>
<td id="Col3" class="cssColOdd" align=left>20018108</td>
<td id="Col4" class="cssColOdd" align=center>A</td>
<td id="Col5" class="cssColOdd">Sunnyside High School</td>
<td id="Col6" class="cssColOdd">10/8/2001</td>
<td id="Col7" class="cssColOdd">11/1/2001</td>
<td id="Col8" class="cssColOdd">10/24/2001</td>
<td id="Col9" class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
<tr>
<td class="cssColOdd" align=left>6200A</td>
<td class="cssColOdd" align=left>Acme Inc.</td>
<td class="cssColOdd" align=left>20018108</td>
<td class="cssColOdd" align=center>A</td>
<td class="cssColOdd">Sunnyside High School</td>
<td class="cssColOdd">10/8/2001</td>
<td class="cssColOdd">11/1/2001</td>
<td class="cssColOdd">10/24/2001</td>
<td class="cssColOdd" align=center>rh/rbm</td>
</tr>
<tr>
<td class="cssColEven" align=left>123</td>
<td class="cssColEven" align=left>Abercrombie Supply Co.</td>
<td class="cssColEven" align=left>20035937</td>
<td class="cssColEven" align=center>A</td>
<td class="cssColEven">Brier College</td>
<td class="cssColEven">10/8/2001</td>
<td class="cssColEven">11/1/2001</td>
<td class="cssColEven">10/24/2001</td>
<td class="cssColEven" align=center>rh</td>
</tr>
</table>
</div>
<p>
The alignment fails if the width of either table is set to "100%"; ideally, I'd like to set the data table width to 100% so it fills the scrolling div.<br>
Setting a table cell's style.pixelWidth to its own offsetWidth increases the cell's width, so apparently offsetWidth includes several pixels more than style.pixelWidth does.<p>
<button onClick="jsAlignColumns()">Run jsAlignColumns() again</button>
<p>
<a href="mailto:paul@dandemutande.org">Improvements? Suggestions? Comments?</a>
<pre>
function jsAlignColumns(){
// This function equates the widths of two sets of table cells: Col1 - Col9 and ColHead1 - ColHead9.
var col;
var colhead;
var colwidth;
var colheadwidth;
alert("Aligning column widths");
for (var i=1; i<10; i++){
col = document.getElementById("Col" + i);
colhead = document.getElementById("ColHead" + i);
colwidth = col.offsetWidth;
colheadwidth = colhead.offsetWidth;
if (colwidth < colheadwidth){colwidth = colheadwidth;}
colhead.style.pixelWidth = colwidth;
col.style.pixelWidth = colwidth;
}
}
</pre>
</body>
</html>