html 테이블에 대해서만 맨 위 행 고정 (고정 테이블 헤더 스크롤)

html 테이블에 대해서만 맨 위 행 고정 (고정 테이블 헤더 스크롤)

---

상단 행이 고정 된 html 테이블을 만들고 싶습니다. 따라서 세로로 스크롤하면 항상 볼 수 있습니다.

자바 스크립트없이 이것을 가능하게하는 영리한 방법이 있습니까?

왼쪽 열을 고정 할 필요는 없습니다.

---

이것을 고정 헤더 스크롤이라고합니다. 여러 가지 문서화 된 접근 방식이 있습니다.

http://www.imaputz.com/cssStuff/bigFourVersion.html

특히 크로스 브라우저 지원을 원할 경우 JavaScript 없이는이를 효과적으로 수행 할 수 없습니다.

크로스 브라우저 / 버전 지원과 관련하여 어떤 접근법을 사용하든 여러 가지 문제가 있습니다.

편집하다:

수정하려는 헤더가 아니라 첫 번째 데이터 행인 경우에도 개념은 동일합니다. 나는 당신이 말한 100 %가 아니 었습니다.

회사가 IE7 +, Firefox 및 Chrome에서 작동 할 수있는 솔루션을 연구해야한다는 추가 생각 이 들었습니다.

수색, 시도, 그리고 좌절의 많은 달들이 실제로 근본적인 문제로 귀결되었습니다. 대부분의 경우 고정 헤더를 얻으려면 고정 높이 / 너비 열을 구현해야합니다. 대부분의 솔루션에는 데이터가 포함 된 두 번째 테이블 위에 떠 다니고 고정되는 헤더에 대한 두 개의 별도 테이블을 사용하기 때문에 .

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

일부 시도는 tbody 및 thead 태그를 사용하는 것이지만 IE는 tbody에 스크롤 막대를 놓을 수 없으므로 높이가 제한되지 않기 때문에 결함이 있습니다 (멍청한 IMO).

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

이 접근 방식은 테이블마다 너무 귀여워서 브라우저마다 계산에 따라 픽셀을 다르게 할당하기 때문에 정확한 픽셀 너비를 보장하는 것과 같은 많은 문제가 있으며 단순히 모든 경우에 완벽하게 분포를 보장 할 수 없습니다 (AFAIK). 테이블 안에 테두리가 있으면 눈에 띄게 나타납니다.

나는 다른 접근 방식을 취 했고이 보장을 할 수 없기 때문에 나사 테이블을 말했습니다. div를 사용하여 테이블을 모방했습니다. 이것은 또한 행과 열을 배치하는 데 문제가 있습니다 (주로 플로팅에 문제가 있기 때문에 인라인 블록을 사용하는 것은 IE7에서 작동하지 않으므로 절대 위치를 사용하여 적절한 위치에 배치해야합니다).

Slick Grid를 만든 사람이 있습니다 .Slick Grid는 비슷한 접근법을 가지고 있으며 이것을 달성하기위한 좋은 (복잡하지만) 예제를 사용할 수 있습니다.

https://github.com/6pac/SlickGrid/wiki

---

고정 헤더 가있는 Pure CSS Scrollable Table 에 따르면 tbody 로 설정하여 헤더를 쉽게 수정하기 위해 DEMO 를 작성했습니다 overflow:auto.

table thead tr{
    display:block;
}

table th,table td{
    width:100px;//fixed width
}


table  tbody{
  display:block;
  height:200px;
  overflow:auto;//set tbody to auto
}

---

내 관심사는 고정 너비의 셀을 갖지 않는 것이 었습니다. 어떤 경우에도 작동하지 않는 것 같습니다. 필요한 솔루션 인 것으로 나타났습니다. 방법을 찾고있는 다른 사람들을 위해 여기에 게시하고 있습니다. 이 바이올린을 확인하십시오

작업 스 니펫 :

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 160px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

---

position:fixedon <th>( <th>맨 위 행)을 사용하여 가능합니다 .

여기에 예가 있습니다

---

position: sticky;테이블 MDN 참조 의 첫 번째 행에 CSS 를 사용할 수 있습니다 .

.table-class tr:first-child>td{
    position: sticky;
    top: 0;
}

---

제목과 표에 각각 하나씩 두 개의 div를 사용할 수 있습니다. 그런 다음 사용

#headings {
  position: fixed;
  top: 0px;
  width: 960px;
}

@ ptriek이 말했듯이 고정 너비 열에서만 작동합니다.

---

The Chromatable jquery plugin allows a fixed header (or top row) with widths that allow percentages--granted, only a percentage of 100%.

http://www.chromaloop.com/posts/chromatable-jquery-plugin

I can't think of how you could do this without javascript.

update: new link -> http://www.jquery-plugins.info/chromatable-00012248.htm

---

I use this:

tbody{
  overflow-y: auto;
  height: 350px;
  width: 102%;
}
thead,tbody{
    display: block;
}

I define the columns width with bootstrap css col-md-xx. Without defining the columns width the auto-width of the doesn't match the . The 102% percent is because you lose some sapce with the overflow

---

Using css zebra styling

Copy paste this example and see the header fixed.

       <style>
       .zebra tr:nth-child(odd){
       background:white;
       color:black;
       }

       .zebra tr:nth-child(even){
       background: grey;
       color:black;
       }

      .zebra tr:nth-child(1) {
       background:black;
       color:yellow;
       position: fixed;
       margin:-30px 0px 0px 0px;
       }
       </style>


   <DIV  id= "stripped_div"

         class= "zebra"
         style = "
            border:solid 1px red;
            height:15px;
            width:200px;
            overflow-x:none;
            overflow-y:scroll;
            padding:30px 0px 0px 0px;"
            >

                <table>
                   <tr >
                       <td>Name:</td>
                       <td>Age:</td>
                   </tr>
                    <tr >
                       <td>Peter</td>
                       <td>10</td>
                   </tr>
                </table>

    </DIV>

Notice the top padding of of 30px in the div leaves space that is utilized by the 1st row of stripped data ie tr:nth-child(1) that is "fixed position" and formatted to a margin of -30px

참고URL : https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling