6


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

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

首先，我听说通过使用 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>
4

2 回答 2

9

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

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

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

希望能帮助到你！

于 2010-08-27T01:42:28.897 回答
2

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

$('.table1 tr:eq(1) td').each(function (i) {
                var _this = $(this);
                $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
            });
于 2015-02-03T00:07:04.870 回答