背景
我正在尝试克隆表格的一部分并将克隆覆盖在原始表格的顶部，以便创建在滚动时固定在页面上的标题。我正在使用 jQuery 插件:datatables FixedHeader 的修改版本来执行此操作。我试过 FixedColumns，但它没有按我想要的方式工作。
除了克隆的表没有与源表正确对齐外，我已经完成了上述工作。例如顶部标题的单元格比实际表格中的单元格窄。
我试过像原来的 FixedHeader 代码那样设置单元格的宽度，但这似乎没有任何效果。此外，如果在 Firebug 的布局选项卡中手动设置宽度，它会更新 HTML View 中元素中的 style="width: blah"，但实际上不会更改单元格的宽度。
问题
如何设置第二个表格中单元格的宽度以匹配原始表格中单元格的宽度，以便在我将第二个表格放在第一个表格顶部时它们对齐。
对于上述内容的更简单版本，请考虑以下代码。尽管我已经在两个表中明确设置了前两个 th 元素的宽度，但第二个表的单元格还是太窄了。我不想指定原始表格中单元格的宽度。我只想将第二个表格中单元格的宽度设置为与第一个相匹配。我该怎么做？
<html>
<head>
<title>Layout</title>
<style type="text/css">
td, th {
text-align: center;
border: 1px solid #bbb;
padding: 0px 1px;
font-size: 1.2em;
color: #555;
}
th {
font-weight: normal;
}
th.colhead {
background-color: #ccc;
}
th.reference {
white-space: nowrap;
font-size: 100%;
}
th.rowhead {
white-space: nowrap;
text-align: left;
padding: 0px 0px 0px 10px;
}
th.cathead {
text-align: left;
background-color: #ddd;
padding: 0px 0px 0px 6px;
font-weight: bold;
}
tr {
height: 31px;
}
tr.even {
background-color: #eee;
}
</style>
</head>
<body>
<div id="source">
<table>
<thead>
<tr>
<th class="colhead" style="width:156px">Test Name</th>
<th class="colhead" style="width:102px">Reference Range</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
</tr>
</thead>
<tbody>
<tr>
<th class="rowhead">This is the test</th>
<th class="rowhead">123 - 456</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div id="thead_clone">
<table>
<thead>
<tr>
<th class="colhead" style="width:156px">Test Name</th>
<th class="colhead" style="width:102px">Reference Range</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
<th class="colhead">26-07-2011 15:58</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
编辑:我发现对于上面的代码，将第二个 table 的宽度设置为与第一个 table 相同可以解决问题，但在我的实际代码，单元格的宽度仍然错误。如何找出问题出在哪里以及如何解决？
最佳答案
在您的示例中，您在第一个表格中以精确的宽度设置了两列。这会导致第二个表格的前两列变得“太窄”，因为它们的宽度是相对的而不是绝对的，因此浏览器计算出它们与其他列相比应该有多宽。
您的选择很简单:将两个表格列都设置为精确宽度，或者都没有。否则，总会有分歧。如果您不这样做(对于两者)，标题列的宽度也取决于它们下方行中单元格的宽度，这取决于它们中的内容。这意味着您要么不使用精确的宽度，而必须使两个表在内容方面完全相同(因此是两个完整的表)，要么您为两者指定精确的列宽，在这种情况下，您可以只使用第二个表的标题行。
如果我必须处理这个问题，我会说生成一个表并使用 jQuery 或 MooTools 制作重复的标题列。然后你查询 DOM，复制，粘贴，设置宽度。
关于HTML 布局 - 使单独表格中的单元格尺寸匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9481741/