冻结第一列和细节

Question

我有一张表,我需要能够粘贴第一列和与之相关的细节.单元格需要能够垂直增长以显示隐藏列表,并且子div完全位于它旁边.为了达到这个效果,我相对定位了表格单元格.这种行为可以在这里看到:

http://jsfiddle.net/vmo28zz4/1/

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

通过这样做,我不能绝对定位单元格,如其他示例所示.如果有另一种方法可以达到扩展器/细节的预期效果,我也会对此持开放态度.谢谢.

Answer 1

添加这些样式：

.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());
});

小提琴

这会执行以下操作：

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