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

Posted 2023-03-06

【中文标题】同步两个不同框架中表格之间的列宽等

【英文标题】：Syncing column width of between tables in two different frames, etc

【发布时间】：2011-04-04 13:08:09

【问题描述】：

由于一些不可避免的原因（大量遗留代码、兼容性、设计需求），我有以下问题：我有两张表，一张直接在另一张下方，但分成两帧（请参阅我的 sig 下方的伪示例。） .我需要这些表的列宽完全同步，以便这两个表“行为”像一个。原因是有一个不会在可以滚动的“数据”表上方滚动的“标题”表。

现在有一些明显的建议（还）不起作用。

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

第二，列的百分比宽度格式。不幸的是，滚动条会搞砸这一点，而且这个解决方案也与下一个可能的解决方案有共同的问题：像素宽度格式。在这里，如果存在超宽的列内容，这些宽度（px 或 %）将在一个表中被覆盖，但不会在另一个表中被覆盖，并且一个不匹配的宽度将破坏所有垂直对齐。显然用 CSS 'max-width' 纠正这个似乎不起作用。

最终可能的解决方案是使用某种 javascript 和 DOM 来动态强制解决问题。在这里强制每列的最小宽度并强制底部宽度覆盖顶部宽度就足够了。尽管如此，实际上将一个表一分为二同时让它们共享相同的列/行模型的能力还是很不错的。希望这个解决方案是可行的并且不是非常复杂（请原谅我目前缺乏关于 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>

【参考方案1】：

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

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

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

希望对你有帮助！

【讨论】：

你认为直接使用 javascript 会比使用 jQuery 做更多的工作吗？

【参考方案2】：

我无法直接获得公认的答案，所以我对其进行了一些修改，以防万一它不适用于其他人。

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