Absolutnie pozycjonowany div z przepełnieniem ukryty - jquery, html, css, dynamic

Mam div, który umieszczam na mojej stronie, która ma style = "z-index:1;position:absolute;" Pozycja div (x, y) jest ustawiana za pomocą

$(onMouse).css("left",(mouseX - offSetX) + "px");
$(onMouse).css("top",(fixY) +"px");

dynamicznie i ten kawałek działa dobrze. (Ale pomyślałem, że to może mieć znaczenie)

W tym dziale umieszczam stół składający się z dwóch rzędów. Pierwszy rząd to tabela z jedną komórką. Drugi rząd składa się z nowego diva, którego styl ustawiłem

$(scrollDiv).css("overflow","hidden");
$(scrollDiv).css("position","relative");
$(scrollDiv).css("height","100px");

Ten drugi div zawiera tabelę, która ma mnóstworzędów w nim. Chciałbym, aby odciął te rzędy na wysokości scrollDiv, ale tak nie jest. Pokazuje tylko wszystkie istniejące wiersze. Czy ktoś wie, co robię źle?

Edytuj # 1

Dziękuję Ci Tim Dodd i Dan za twoje odpowiedzi! Wziąłem utworzony przez Ciebie JSFiddle i zmodyfikowałem go, aby był ogólną wersją tego, co miałem na myśli, aby był bardziej przejrzysty. Możesz go znaleźć tutaj: http://jsfiddle.net/S3sh7/1/

Chcę, aby tabela tworzona po kliknięciu pokazywała te same wiersze co tabela oryginalna. Myślę, że możesz to zrobić, ustawiając overflow i height właściwości, jak zrobiłem z .pieceOfTable Klasa CSS, ale to nie działa. Czy wiesz, jak bym to osiągnął?

Odpowiedzi:

0 dla odpowiedzi № 1

Cóż, pierwsza rzecz ...

$(onMouse).css({
left: (mouseX - offSetX) + "px",
top: fixY +"px"
});

$(scrollDiv).css({
overflow: "hidden",
position: "relative",
height: "100px"
});

Poza tym div wyświetlany po kliknięciu nie ma wartości wysokości lub overflow:hidden. Może mieć również sens nadanie mu granicy, aby użytkownicy mogli zobaczyć, gdzie / dlaczego to odcięcie ...?

#floater {  <-- based off of your fiddle. Update if needed.
height: 200px;
overflow-y: auto;
border: 1px solid #000;
}

---

0 dla odpowiedzi nr 2

Ustaw przepełnienie-y: przewiń; na #TblBody lub stole i ustaw żądaną wysokość.

---

0 dla odpowiedzi № 3

Zrobiłem to milion razy, co jest jedynym powodem, dla którego zrozumiałem twoje pytanie. Musisz zrobić coś takiego.

<div id="TblWrapper">
<div id= "TblHeader"><table><th>ColumnHeader</th></table></div>
<div id = "TblBody">
<table>
<tr><td>A</td></tr>
<!-- more Rows-->
</table>
</div>
</div>

Następnie w stylu, który sprawia, że ​​robisz coś takiego ...

#TblWrapper
{
Height:210 px;
}

#TblBody
{
Height: 200px;
overflow-y:scroll;
}

Spójrz tutaj dla przykładu. Dodałem kilka kolorów tła do tego przykładu, abyś mógł zobaczyć, jak zbudowano całość.

Ta piękna część jest w stanie bez zbędnego JavaScript. Co w takim przypadku spowodowałoby przewijanie.

---

0 dla odpowiedzi nr 4

Coś jak zdefiniowanie kilku -

min-width: define;
width: define;
max-width: define;

i przełączanie overflow-y: z odrobiną zagnieżdżania?

---