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

问题描述

由于有些不可避免的原因（大量的遗留代码，兼容性，设计需要）我有以下问题：我有两个表，一个直接在另一个之下，但分裂在两个帧看到我的sig下面的伪例子。我需要这些表的列宽度完全同步，以使这两个表的行为像一个。原因是有一个标题表，不会滚动到可以滚动的数据表之上。

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来动态强制这个问题。这里强制每个列上的最小宽度并且强制底部宽度以覆盖顶部宽度将是足够的。尽管如此，实际上将表分成两个而具有共享相同的列/行模型的能力将是非常整洁的。希望这个解决方案是可行的，并不是非常复杂（原谅我目前缺乏知识的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屋！