"thead"와 관계없이 테이블의 "tbody"를 스크롤하는 방법은 무엇입니까?

"thead"와 관계없이 테이블의 "tbody"를 스크롤하는 방법은 무엇입니까?

---

테이블 에 대한 W3 사양 에 지정된대로 :

테이블 행은 각각 THEAD, TFOOT및 TBODY요소를 사용하여 테이블 헤드, 테이블 푸트 및 하나 이상의 테이블 본문 섹션으로 그룹화 될 수 있습니다 . 이 분할을 통해 사용자 에이전트는 테이블 머리와 발에 관계없이 테이블 본문의 스크롤을 지원할 수 있습니다.

내가 생성 된 다음의 예를 ,하지만 작동하지 않습니다.

HTML :

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS :

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

CSS :

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}

---

누락 된 부분은 다음과 같습니다.

thead, tbody {
    display: block;
}

데모

---

비슷한 문제가 발생했을 때 약 한 달 전에이 게시물을 보았습니다. UI 대화 상자 내의 테이블에 대해 y 축 스크롤이 필요했습니다 (예, 제 말이 맞습니다). 나는 운이 좋았다. 작업하는 해결책이 상당히 빨리 나타났다. 하지만 얼마 지나지 않아 솔루션이 자체적으로 생명을 얻었습니다.

최상위 요소 (thead, tfoot 및 tbody)를 표시 블록으로 설정하는 것의 문제는 다양한 구성 요소 간의 열 크기의 브라우저 동기화가 빠르게 손실되고 모든 항목이 허용 가능한 최소 크기로 압축된다는 것입니다. 열 너비를 설정하는 것이 가장 좋은 조치처럼 보이지만 고정 된 테이블 레이아웃을 사용하더라도 이러한 열의 합계와 일치하도록 모든 내부 테이블 구성 요소의 너비를 설정하지 않으면 머리글과 본문 사이에 약간의 차이가 있습니다. 스크롤 막대가있을 때.

나를위한 해결책은 모든 너비를 설정하고 스크롤 막대가 있는지 확인한 다음 브라우저가 실제로 결정한 크기 조정 된 너비를 가져 와서 마지막 열 너비를 조정하여 머리글과 바닥 글에 복사하는 것이 었습니다. 스크롤 바. 이렇게하면 열 너비에 약간의 유동성이 제공됩니다. 테이블 너비가 변경되면 대부분의 주요 브라우저는 그에 따라 tbody 열 너비를 자동으로 조정합니다. 남은 것은 각각의 tbody 크기에서 머리글 및 바닥 글 열 너비를 설정하는 것입니다.

$table.find("> thead,> tfoot").find("> tr:first-child")
    .each(function(i,e) {
        $(e).children().each(function(i,e) {
            if (i != column_scaled_widths.length - 1) {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
            } else {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
            }
        });
    });

이 바이올린은 http://jsfiddle.net/borgboyone/gbkbhngq/ 라는 개념을 보여줍니다 .

Note that a table wrapper or additional tables are not needed for y-axis scrolling alone. (X-axis scrolling does require a wrapping table.) Synchronization between the column sizes for the body and header will still be lost if the minimum pack size for either the header or body columns is encountered. A mechanism for minimum widths should be provided if resizing is an option or small table widths are expected.

The ultimate culmination from this starting point is fully realized here: http://borgboyone.github.io/jquery-ui-table/

A.

---

try this.

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}

---

thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}

---

mandatory parts:

tbody {
    overflow-y: scroll;  (could be: 'overflow: scroll' for the two axes)
    display: block;
    with: xxx (a number or 100%)
}

thead {
    display: inline-block;
}

참고URL : https://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead