Question

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

peds

通过这样做，我无法像其他例子中那样绝对定位细胞。如果有另一种方法可以实现扩展器/细节的预期效果，我也会对此持开放态度。感谢。

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

Fiddle

执行以下操作：

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

冻结第一列和细节

1 个答案: