가로 스크롤이있는 HTML 표 (첫 번째 열 고정)

가로 스크롤이있는 HTML 표 (첫 번째 열 고정)

---

나는 고정 된 첫 번째 열 (및 수평 오버플로가있는 나머지 테이블)이있는 테이블을 만드는 방법을 생각하고있었습니다. 비슷한 질문이있는 게시물을 보았습니다. 그러나 고정 열 비트가 해결되지 않은 것 같습니다. 도움?

---

비슷한 스타일의 테이블이 있습니다.

<table style="width:100%; table-layout:fixed">
    <tr>
        <td style="width: 150px">Hello, World!</td>
        <td>
            <div>
                <pre style="margin:0; overflow:scroll">My preformatted content</pre>
            </div>
        </td>
    </tr>
</table>

---

어때 :

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px; /*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding: 10px;
  width: 100px;
}
.fix {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -100px;
  width: 100px;
}
.outer {
  position: relative;
}
.inner {
  overflow-x: scroll;
  overflow-y: visible;
  width: 400px; 
  margin-left: 100px;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <th class=fix></th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th class="fix">Col 5</th>
      </tr>
      <tr>
        <th class=fix>Header A</th>
        <td>col 1 - A</td>
        <td>col 2 - A (WITH LONGER CONTENT)</td>
        <td>col 3 - A</td>
        <td>col 4 - A</td>
        <td class=fix>col 5 - A</td>
      </tr>
      <tr>
        <th class=fix>Header B</th>
        <td>col 1 - B</td>
        <td>col 2 - B</td>
        <td>col 3 - B</td>
        <td>col 4 - B</td>
        <td class=fix>col 5 - B</td>
      </tr>
      <tr>
        <th class=fix>Header C</th>
        <td>col 1 - C</td>
        <td>col 2 - C</td>
        <td>col 3 - C</td>
        <td>col 4 - C</td>
        <td class=fix>col 5 - C</td>
      </tr>
    </table>
  </div>
</div>

이 jsbin에서 테스트 할 수 있습니다 : http://jsbin.com/uxecel/4/edit

---

jQuery DataTables 플러그인을 사용하면 고정 헤더와 열을 지원합니다. 이 예는 html 테이블 "example"에 고정 열 지원을 추가합니다.

http://datatables.net/extensions/fixedcolumns/

두 개의 고정 열의 경우 :

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

---

skube의 접근 방식에 따라 필요한 최소한의 CSS 세트는 다음과 같습니다.

.horizontal-scroll-except-first-column {
    width: 100%;
    overflow: auto;
    margin-left: 20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
    position: absolute;
    width: 20em;
    margin-left: -20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
    /* Without this, if a cell wraps onto two lines, the first column
     * will look bad, and may need padding. */
    white-space: nowrap;
}

HTML 사용 :

<div class="horizontal-scroll-except-first-column">
    <table>
        ...
    </table>
</div>

---

이 JQuery 플러그인을 살펴보십시오.

http://fixedheadertable.com

It adds vertical (fixed header row) or horizontal (fixed first column) scrolling to an existing HTML table. There is a demo you can check for both cases of scrolling.

참고URL : https://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed