冻结第一列并显示细节

Question

冻结第一列并显示细节

5

我有一个表格，需要将第一列和与其相关的详细信息固定在一起。该单元格需要能够垂直增长以显示隐藏的列表，并且一个子div被绝对定位在其旁边。为了实现这种效果，我使用相对定位来定位表格单元格。可以在以下链接中看到该行为：

.headcol {
    position: relative;
    background-color:white;
}

这样做的话，我无法像其他示例中那样绝对定位单元格。如果有其他方法可以实现我的展开器/详细信息所需的效果，我也很乐意尝试。谢谢。

- TheButlerDidIt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rick Hitchcock · Accepted Answer

添加这些样式：

.content tr::before {
  content: '';
  display: block;
}

.content td:first-child {
  position: absolute;
}

将 updateDetailWidths() 更改如下：

function updateDetailWidths() {
  var mw= 0;
  $('.content td:first-child')
    .each(function() {
      mw= Math.max(mw, $(this).width());
      $(this).parent().height($(this).height());
    })
    .width(mw);
  $('<style>.content tr::before{width:'+mw+'px}</style>').appendTo('head');
  $('.headcol-detail').width($('.content').innerWidth()-mw);
}

请在点击处理程序的末尾添加以下代码：

$('td > div:first-child').click(function () {
  ...
  var tr= $(this).closest('tr');
  tr.height($('td:first', tr).height());
});

Fiddle

这个做了以下几件事情：

使第一个绝对定位的 td 具有相同的宽度。
将每行设置为其第一个 td 的高度。
为每个 tr 添加伪元素，将第二个及后续的 td 推到第一个绝对定位的 td 的右侧。