고정 헤더와 고정 열이있는 HTML 테이블?

고정 헤더와 고정 열이있는 HTML 테이블?

---

열 머리글이 화면에 고정되고 첫 번째 열이 고정되어 데이터와 함께 스크롤되도록 긴 HTML 테이블을 표시하는 CSS / JavaScript 기술이 있습니까?

표의 내용을 스크롤 할 수 있지만 항상 상단의 열 머리글과 왼쪽의 첫 번째 열을 볼 수 있기를 원합니다.

좋은 jQuery 플러그인이 있다면! 그것이 도움이된다면 내가 관심을 갖는 유일한 브라우저는 Firefox입니다.

---

pranav가 게시 한 링크의 작동 예 :

http://jsbin.com/nolanole/1/edit?html,js,output

참고 : IE 6, 7, 8 (호환성 모드 켜짐 또는 꺼짐), FF 3 및 3.5, Chrome 2에서 테스트되었습니다. 화면 판독기 친화적이지 않습니다 (헤더는 콘텐츠 테이블의 일부가 아님).

5/5/14 편집 : 예제를 jsBin으로 이동했습니다. 이것은 오래되었지만 현재 Chrome, IE 및 Firefox에서 놀랍게도 여전히 작동합니다 (IE 및 Firefox는 행 높이를 약간 조정해야 할 수도 있음).

---

jQuery를 DataTables의 플러그 - 인 엑셀과 같은 고정 컬럼 (들) 및 헤더를 달성하는 하나 개의 방법이 우수하다.

사이트의 예제 섹션과 "추가"를 참고하십시오.
http://datatables.net/examples/
http://datatables.net/extras/

'추가'섹션에는 고정 열 및 고정 헤더 도구가 있습니다.

고정 열
http://datatables.net/extras/fixedcolumns/
(이 페이지의 예가 귀하의 질문에 가장 적합한 예라고 생각합니다.)

고정 헤더
http://datatables.net/extras/fixedheader/
(전체 페이지 스프레드 시트 스타일 레이아웃의 예 포함 : http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )

---

당신은 이것을 찾고 있을지도 모릅니다 .

그래도 몇 가지 알려진 문제가 있습니다.

---

나는 이것이 오래된 질문이지만 내 자신의 스크립트를 연결하기에 꽤 좋은 곳이라고 생각합니다.

http://code.google.com/p/js-scroll-table-header/

구성없이 작동하며 설정이 정말 쉽습니다.

---

테이블의 데이터가 세로로 스크롤되는 동안 헤더가 그대로 유지되도록하려면 다음과 같이 "overflow-y : auto"스타일의 <tbody>를 구현해야합니다.

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

<tbody> 콘텐츠가 원하는 높이보다 커지면 스크롤을 시작합니다. 그러나 헤더는 스크롤 위치에 관계없이 상단에 고정됩니다.

---

이 답변에는 귀하의 질문에 대한 가장 좋은 답변이 있습니다.

고정 헤더가있는 HTML 테이블?

순수 CSS를 기반으로 합니다.

---

고정 머리글, 고정 바닥 글, 고정 왼쪽 열 및 고정 오른쪽 열이있는 무언가를 만들었습니다. 이것은 IE에서만 잘 작동합니다. 대부분의 사용자가 여전히 IE를 사용하고 있기 때문에 이것은 도움이 될 수 있습니다. Scrollable Table 에서 코드를 찾으십시오 . 당신의 제안을 들려주세요.

한편 나는 다른 브라우저에서 열을 수정하기 위해 노력하고 있습니다. 난 당신이 게시 계속됩니다. :-)

---

<script>
   $(document).ready(function () {
   $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
   $("#GridHeader table tbody .rows").remove();
   $('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>

<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>

---

완벽하지는 않지만 여기에있는 일부 최고의 답변보다 더 가까워졌습니다.

Two different tables, one with the header, and the other, wrapped with a div with the content

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>

---

I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).

---

The first column has a scrollbar on the cell right below the headers

<table>
    <thead>
        <th> Header 1</th>
        <th> Header 2</th>
        <th> Header 3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="width: 50; height:30; overflow-y: scroll"> 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                </div>
            </td>
            <td>
                Hello world
            </td>
            <td> Hello world2
        </tr>
    </tbody>
</table>

---

YUI DataTable

I don't know if YUI DT has this feature but I won't be surprised if it does.

---

Here is a good jQuery plugin, working in all browsers!

You have a fixed header table without fixing its width.

Check it: https://github.com/benjaminleouzon/tablefixedheader

Disclaimer: I am the author of the plugin.

ReferenceURL : https://stackoverflow.com/questions/684211/html-table-with-fixed-headers-and-a-fixed-column