Freeze first column and detail

Question

I have a table that I need to be able to stick the first column and a detail associated with it. The cell needs to be able to grow vertically to display hidden list and a child div is positioned absolutely next to it. To achieve that effect I relatively positioned the table cell. The behavior can be seen here:

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

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

By doing so, I can't absolutely position the cell as seen in other examples. If there's another way to achieve the desired effect of my expander/details, I'd be open to that as well. Thanks.

Answer 1

Add these styles:

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

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

Change updateDetailWidths() as follows:

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

Add the following code at the end of the click handler:

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

Fiddle

This does the following:

1. Makes the absolute-positioned first tds the same width.
2. Sets each row to be the height of its first td.
3. Adds a pseudo-element to each tr, which pushes the second and subsequent tds to the right of the absolute-positioned first td.