İlk sütunu ve ayrıntıları dondurun

Question

İlk sütunu ve onunla ilişkili bir ayrıntıyı yapıştırabilmem için bir tablom var. Hücrenin gizli liste görüntülemek için dikey olarak büyümesi gerekir ve bir çocuk div kesinlikle onun yanında konumlandırılmış. Bu etkiyi elde etmek için tablo hücresini nispeten yerleştirdim. davranış burada görülebilir: Diğer örneklerde görüldüğü gibi

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

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

Böyle yaparak, kesinlikle hücreyi konumlandırmak mümkün değil. Genişletici/detayımın istenen etkisini elde etmenin başka bir yolu varsa, buna da açık olacağım. Teşekkürler.

Answer 1

Ekle Bu stilleri:

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

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

Değişim updateDetailWidths() şöyle:

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

Fiddle

:

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

tıklama işleyicisi sonuna aşağıdaki kodu ekleyin

Bu, aşağıdaki yapar:

1. mutlak yerleştirilmiş birinci td s aynı genişliğe yapar.
2. Her satırı ilk td ilk yüksekliğini olacak şekilde ayarlar.
3. Her tr için, ikinci ve sonraki td s mutlak konumlandırılmış ilk td sağa iten bir sözde öğe ekler.