同步两个不同框架中的表之间的列宽，等等

Question

由于一些不可避免的原因(许多遗留代码，兼容性，设计需求)，我有以下问题:我有两个表，一个在另一个的正下方，但在两个框架之间拆分(参见我签名下面的伪示例)。我需要这些表的列宽准确地同步，以便这两个表‘行为’像一个。原因是有一个“标题”表，它不会滚动到一个可以滚动的“数据”表之上。

现在有一些明显的建议，但(还)行不通。

首先，我听说通过使用CSS，有一种方法可以将滚动条只放在表行上，而不是表头上，这就是这里想要的效果。不幸的是，由于上面提到的原因，这不是一个可行的选择。

第二，列的百分比宽度格式。不幸的是，滚动条会把这件事搞得一团糟，而且这个解决方案和下一个可能的解决方案也有相同的问题:像素宽度格式化。在这里，如果有超宽的列内容，这些宽度(px或%)将在一个表中被覆盖，但在另一个表中不会被覆盖，并且一个不匹配的宽度将破坏所有垂直对齐。显然，用CSS 'max-width‘纠正这个错误似乎行不通。

最后可能的解决方案是使用某种类型的Javascript和DOM来动态强制解决问题。在这里，强制每列的最小宽度和强制底部宽度覆盖顶部宽度就足够了。尽管如此，实际上将一个表一分为二，同时让它们共享相同的列/行模型的能力对来说是非常巧妙的。希望这个解决方案是可行的，并且不是非常复杂(请原谅我现在对RE Javascript/DOM知识的缺乏)。

谢谢,

斯科勒姆

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
   <td>...</td><td>...</td><td>...</td><td>...</td>
  </tr>
</table>

Answer 1

首先，将T1的宽度设置为T2的宽度。然后，从t1中获取每个td，并将其宽度设置为与T2的列的宽度相匹配。

试试这个概念证明：http://jsfiddle.net/HqpGp/。

您将需要jQuery，并对其进行修改以使用frames，但我认为这是一个很好的开始。不过，我很确定JS部分可以用更好的方式编写。

希望它能帮上忙！

Answer 2

我不能直接得到被接受的答案，所以我稍微修改了一下，以防它对其他人不起作用。

$('.table1 tr:eq(1) td').each(function (i) {
                var _this = $(this);
                $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
            });