在两个不同的帧中同步表之间的列宽等

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,并修改它以使用框架,但我认为这是一个良好的开端.不过,我很确定JS部分可以用更好的方式编写.

希望能帮助到你!