CSS를 사용하여 고정 헤더로 스크롤 가능한 테이블을 만드는 방법

CSS를 사용하여 고정 헤더로 스크롤 가능한 테이블을 만드는 방법

---

이 질문에 이미 답변이 있습니다.

• 고정 헤더가있는 CSS 전용 스크롤 가능 표 13 답변

내 테이블의 헤더를 고정하고 싶습니다. 테이블이 스크롤 가능한 div 안에 있습니다. 여기에서 내 코드를 참조하십시오 : http://jsfiddle.net/w7Mm8/114/ 친절하게 나에게 해결책을 제안하십시오.

감사

내 코드 :

<div style="position: absolute; height: 200px; overflow: auto; ">
    <div style="height: 250px;">
        <table border="1">
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
        </table>
    </div>
</div>

---

원하는 것은 테이블의 내용을 테이블의 헤더와 분리하는 것입니다. <th>요소 만 스크롤하기를 원합니다 . <tbody>및 <thead>요소를 사용하여 HTML에서 이러한 구분을 쉽게 정의 할 수 있습니다 .
이제 표의 머리글과 본문은 여전히 ​​서로 연결되어 있지만 여전히 동일한 너비 (및 동일한 스크롤 속성)를 갖습니다. 이제 더 이상 테이블로 '작동'하지 않도록 display: block. 이 방법 <thead>과는 <tbody>구분됩니다.

table tbody, table thead
{
    display: block;
}

이제 스크롤을 테이블 본문으로 설정할 수 있습니다.

table tbody 
{
   overflow: auto;
   height: 100px;
}

마지막 <thead>으로는 더 이상 본문과 동일한 너비를 공유하지 않으므로 테이블 헤더에 정적 너비를 설정해야합니다.

th
{
    width: 72px;
}

에 대한 정적 너비도 설정해야합니다 <td>. 이렇게하면 정렬되지 않은 열 문제가 해결됩니다.

td
{
    width: 72px;
}

---

일부 HTML 요소도 누락되었습니다. 모든 행은 <tr>헤더 행을 포함 하는 요소에 있어야합니다 .

<tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
     <th>head4</th>
</tr>

나는 이것이 당신이 의미 한 바를 바랍니다.

jsFiddle

추가

열 너비를 더 많이 제어하고 서로 너비를 변경하고 머리글과 본문 열을 정렬 상태로 유지하려면 다음 예제를 사용할 수 있습니다.

    table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
    table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
    table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
    table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

---

건방진 방법을 생각할 수 있지만 이것이 최선의 선택이 아니라고 생각하지만 작동합니다.

헤더를 별도의 테이블로 만든 다음 다른 테이블을 div에 배치하고 최대 크기를 설정 한 다음을 사용하여 스크롤이 들어 오도록 overflow합니다.

table {
  width: 500px;
}

.scroll {
  max-height: 60px;
  overflow: auto;
}

<table border="1">
  <tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
  </tr>
</table>
<div class="scroll">
  <table>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr>
  </table>
</div>

참고 URL : https://stackoverflow.com/questions/19559197/how-to-make-scrollable-table-with-fixed-headers-using-css