在两个不同的框架之间同步列之间的列宽等 [英] Syncing column width of between tables in two different frames, etc

问题描述

由于有些不可避免的原因（很多遗留代码，兼容性，设计需求）我有以下问题：我有两个表，一个直接在另一个之下，但是分为两个框架看到我的sig下的伪示例）。我需要这些表的列宽才能完全同步，以便这两个表的行为就像一个。原因是要有一个'header'表，它不会滚动到可以滚动的'data'表上方。

For reasons which are somewhat unavoidable (lots of legacy code, compatibility, design needs) I have the following problem: I have two tables, one directly below the other, but split between two frames (see the pseudo-example below my sig.). I need the column widths of these tables to synchronize exactly so that these two tables 'act' like one. The reason being to have a 'header' table which will not scroll above a 'data' table which can scroll.

现在有一些明显的建议（还）工作。

Now there are a few obvious suggestions which don't (yet) work.

首先，我听说通过使用CSS，有一种方法可以将滚动条放在表格行上，而不是表标题，这是这里的预期效果。不幸的是，由于上述原因，这不是一个可行的选择。

First, I have heard that by using CSS there is a way to put a scrollbar just on the table rows, not the table header, which is the intended effect here. Unfortunately, this is not a viable option due to the reasons mentioned above.

其次，列的百分比宽度格式。不幸的是，滚动条将会混乱，这个解决方案也与下一个可能的解决方案：像素宽度格式化分享一个问题。在这里，如果列内容是非常宽的，这些宽度（px或％）将被覆盖在一个表中，而不是另一个，并且一个不匹配的宽度将会破坏垂直对齐。显然用CSS'max-width'来纠正它似乎不起作用。

Second, percentage width formatting on the columns. Unfortunately the scrollbar will mess this up, and this solution also shares a problem with the next possible solution: pixel width formatting. Here, if there is column content that is extra wide these widths (px or %) will be overridden in one table but not the other, and one mismatching width will break -all- the vertical alignments. Apparently correcting this with a CSS 'max-width' does not seem to work.

最终可能的解决方案是使用某种Javascript和DOM来动态地强制该问题。这里强制每列的最小宽度并强制底部宽度来覆盖顶部宽度就足够了。尽管如此，实际上拆分两个表的能力同时拥有相同的列/行模型也是非常简单的。希望这个解决方案是可行的，并不是非常复杂（原谅我目前缺乏知识RE Javascript / DOM）。

The final possible solution is using some sort of Javascript and DOM to dynamically force the issue. Here forcing a min-width on each column and forcing bottom widths to override the top widths would be sufficient. Still, the ability to actually split a table in two while having them share the same column/row model would be pretty neat to. Hopefully this solution is feasable and not extremely complicated (pardon my present lack of knowledge RE Javascript/DOM).

谢谢，

Skolem

<!-- 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>

推荐答案

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

First, set the t1's width to t2's width. Then, take every td from t1, and set its width matching the widths of t2's columns.

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

你将需要jQuery ，并修改它使用框架，但我认为这是一个好的开始。我很确定JS部分可以以更好的方式写入。

You will need jQuery, and modify it to work with frames, but i think it's a good start. I'm pretty sure the JS part could be written in a nicer way, though.

希望它有帮助

这篇关于在两个不同的框架之间同步列之间的列宽等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！