[html] 큰 테이블을 볼 때 항상 HTML 테이블 헤더가 창 상단에 표시됩니다.

이것은 테이블에 끈적 끈적한 헤더를 갖는 것이 까다로운 일입니다. 나는 asp : GridView 와 동일한 요구 사항을 가지고 있었고 gridview에 끈적 끈적한 헤더가 있다고 생각했습니다. 사용할 수있는 솔루션이 많이 있으며 모든 솔루션을 시도하는 데 3 일이 걸렸지 만 어느 것도 만족할 수 없었습니다.

이러한 솔루션의 대부분에 직면 한 주요 문제는 정렬 문제였습니다. 헤더를 플로팅하려고하면 헤더 셀과 바디 셀의 정렬이 어긋납니다.

일부 솔루션을 사용하면 헤더가 본문의 처음 몇 행에 겹치는 문제가 발생하여 본문 행이 부동 헤더 뒤에 숨겨집니다.

이제는 이것을 달성하기 위해 내 자신의 논리를 구현해야했지만 완벽한 솔루션으로 간주하지는 않지만 누군가에게 도움이 될 수 있습니다.

아래는 샘플 테이블입니다.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

참고 : 테이블은 클래스 속성이 ‘table-holder’인 DIV로 랩핑됩니다.

아래는 html 페이지 헤더에 추가 한 JQuery 스크립트입니다.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

마지막에는 채색 목적의 CSS 클래스가 있습니다.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

따라서이 논리의 전체 아이디어는 테이블을 테이블 홀더 div에 배치하고 페이지가로드 될 때 클라이언트 측에서 해당 홀더의 복제본을 만드는 것입니다. 이제 클론 홀더 내부의 테이블 본문을 숨기고 나머지 헤더 부분을 원래 헤더에 놓습니다.

동일한 솔루션이 asp : gridview에서도 작동합니다. gridview에서이를 달성하려면 두 단계를 더 추가해야합니다.

1. 웹 페이지의 gridview 객체의 OnPrerender 이벤트에서 머리글 행의 테이블 섹션을 TableHeader와 동일하게 설정하십시오.

   if (this.HeaderRow != null)
   {
       this.HeaderRow.TableSection = TableRowSection.TableHeader;
   }

2. 그리고 당신의 그리드를로 감싸십시오 <div class="table-holder"></div>.

참고 : 헤더에 클릭 가능한 컨트롤이있는 경우 복제 된 헤더에서 발생한 이벤트를 원래 헤더로 전달하기 위해 더 많은 jQuery 스크립트를 추가해야 할 수도 있습니다. 이 코드는 jmosbech에서 생성 한 jQuery sticky-header 플러그인에서 이미 사용 가능합니다.

---