programing

테이블 고정 헤더 및 스크롤 가능한 본문

mailnote 2023. 7. 30. 17:59
반응형

테이블 고정 헤더 및 스크롤 가능한 본문

저는 부트스트랩 3 테이블을 이용하여 고정 헤더와 스크롤 가능한 콘텐츠로 테이블을 만들려고 합니다.안타깝게도 제가 찾은 해결책은 부트스트랩과 함께 작동하지 않거나 스타일을 엉망으로 만듭니다.

여기에 간단한 부트스트랩 테이블이 있지만, 어떤 이유에서인지 나는 tbody의 높이가 10px가 아닙니다.

height: 10px !important; overflow: scroll;

예:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

고정 테이블 헤드 - CSS 전용

단히간position: sticky; top: 0;당신의.th요소. (크롬, FF, 에지)

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

스틱 수직 TH 열 및 수평 TH 열(내부)의 경우:

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }


.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th></th><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
      <tr><th>Bar</th><td>B1</td><td>B2</td></tr>
      <tr><th>Baz</th><td>C1</td><td>C2</td></tr>
      <tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
      <tr><th>Zup</th><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

TH 테두리 문제 수정

때부터border번역문에 제대로 그려지지 않습니다.TH요소, "요소"를 다시 만들고 렌더링하려면box-shadow속성:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}


.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

TH 스티커가 작동하지 않는 수정

상위요소확니다합인의를"의 부모 합니다.th 소요, 적도까까지table요소(포함), 설정 안 함overflow관련 스타일(예:overflow,overflow-x,overflow-y).

자세한 내용은 stackoverflow.com/Why 이 'position: sticky'가 작동하지 않는 것을 참조하십시오.

고정 테이블 헤드 - JavaScript 사용

고대 브라우저의 경우, 당신은 약간의 JS를 사용할 수 있고 Y를 번역할 수 있습니다.th

// Fix table head example:

function tableFixHead(evt) {
  const el = evt.currentTarget,
    sT = el.scrollTop;
  el.querySelectorAll("thead th").forEach(th =>
    th.style.transform = `translateY(${sT}px)`
  );
}

document.querySelectorAll(".tableFixHead").forEach(el =>
  el.addEventListener("scroll", tableFixHead)
);
.tableFixHead {
  overflow-y: auto;
  height: 100px;
}


/* Just common table stuff. */

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px 16px;
}

th {
  background: #eee;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

한 CSS 한순수 CSS 근을위는컨서필다니요합가너가 있는 합니다.overflow-y: auto;스크롤/오버플로 행을 숨길 방법을 결정합니다.

  1. 하지 않은 헤더로 (투명하지않오이레버헤로더은티스커(▁()position: sticky; top: 0; z-index: 1;), @RokoC Buljan의 대답처럼.
  2. 을 통해tr:after아래와 같은 속성).

용기는 외부일 수 있습니다.<div> 는또.<table>자체 그 그자또는그예일부체예일(부그:는▁itselfe,또▁of체자▁a▁or▁it▁part)<tbody>에 두 .display: block;매우 효과적으로 그들은 취급됩니다.divs의

수정된 @giulio 솔루션 아래 참조:

:root {
  --height-height: 150px;
  /* cell width has to reserve some space for scrolling. Hence the sum < 100% */
  --cell-width: 85px;
}

.header-fixed {
  width: 200px;
}

/* Treat all as divs */
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
  display: block;
}

/* Prevent header to wrap */
.header-fixed > thead > tr > th {
  white-space: nowrap;
  background-color: lightgrey;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

.header-fixed > tbody {
  overflow-y: auto;
  height: var(--height-height);
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
  width: var(--cell-width);
  border: thin solid grey;
  float: left;
}
<table class="header-fixed">
 <thead>
   <tr> <th>Header 1</th> <th>Header 2</th> </tr>
 </thead>
 <tbody>
   <tr> <td>cell 11</td> <td>cell 12</td> </tr>
   <tr> <td>cell 21</td> <td>cell 22</td> </tr>
   <tr> <td>cell 31</td> <td>cell 32</td> </tr>
   <tr> <td>cell 41</td> <td>cell 42</td> </tr>
   <tr> <td>cell 51</td> <td>cell 52</td> </tr>
   <tr> <td>cell 61</td> <td>cell 62</td> </tr>
   <tr> <td>cell 71</td> <td>cell 72</td> </tr>
   <tr> <td>cell 81</td> <td>cell 82</td> </tr>
   <tr> <td>cell 91</td> <td>cell 92</td> </tr>
 </tbody>
</table>

에는 2열 이상일 경우에는 2열 이상일 에는 2열 이상일 경우를 가 있습니다.var(--cell-width)그에 따라 변합니다.

작동 솔루션은 다음과 같습니다.

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

jsfiddle 링크

갱신하다

최신 라이브러리와 여전히 유지 관리되는 라이브러리의 경우 jquery.float Thead(댓글에서 Bob Jordan이 언급한 대로)를 대신 사용해 보십시오.

오래된 대답

이것은 매우 오래된 답변이며, 아래에 언급된 라이브러리는 더 이상 유지 관리되지 않습니다.

나는 깃허브에서 스티키테이블헤더를 사용하고 있고 그것은 매력적으로 작동합니다!

하지만 나는 헤더를 투명하지 않게 하기 위해 이 css를 추가해야 했습니다.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

디브로 포장할 필요 없어요

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

부트플리: https://www.codeply.com/p/nkaQFc713a

지금까지 제가 본 최고의 솔루션은 CSS 전용이며, 브라우저 간 지원이 좋고 정렬 문제가 없는 것은 코딩 랍비홀의 이 솔루션입니다.

table {
  width: 100%;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  overflow-y: auto;
  table-layout: fixed;
  max-height: 200px;
}

CSS가 있으면 더 쉽습니다.

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }


table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    background-color: white;
    position: sticky;
    top: 0;
}
   <table>
      <thead>
        <tr><th>TH 1</th><th>TH 2</th></tr>
      </thead>
      <tbody>
        <tr><td>A1</td><td>A2</td></tr>
        <tr><td>B1</td><td>B2</td></tr>
        <tr><td>C1</td><td>C2</td></tr>
        <tr><td>D1</td><td>D2</td></tr>
        <tr><td>E1</td><td>E2</td></tr>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>

JJ는 필요 없습니다.[vh]에서 테이블 높이를 설정하는 것이 중요합니다.

파티에 늦었지만(내 인생의 이야기), 하지만 이것은 구글의 첫 번째 결과이고, 위의 어떤 것도 나를 일하게 하지 않았기 때문에, 여기 내 코드가 있습니다.

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

제가 보기에 jQuery에 가장 적합한 플러그인 중 하나는 DataTables입니다.

또한 고정 헤더에 대한 확장 기능이 있으며 매우 쉽게 구현됩니다.

그들의 사이트에서 가져온 것:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

스크롤할 수 있는 가장 간단한 방법은<tbody>다음과 같습니다.

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

최신 추가 위치: 'sticky'가 여기서 가장 간단한 해결책일 것입니다.

.outer{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}
 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>

단일 창에서 스크롤 가능한 여러 테이블 지원

순수 CSS & 고정 또는 끈적임 없음.

저는 수년 동안 자동 "td"와 "th" 너비를 가진 고정 테이블 헤더를 검색하고 있습니다.마지막으로 코딩을 했습니다. 저에게는 잘 작동하지만 모두에게 잘 작동하는지는 잘 모르겠습니다.

문제 1: "tr"이 많은 상태에서는 테이블이나 차체 높이를 설정할 수 없습니다. 기본 테이블 속성 때문입니다.

솔루션:테이블에 표시 속성을 설정합니다.

문제 2: 디스플레이 속성을 설정할 때 "td" 요소의 너비는 "th" 요소의 너비와 같을 수 없습니다.그리고 100%와 같이 full width table에서 요소를 제대로 채우기가 어렵습니다.

해결책: CSS "flex"는 너비와 채우기 설정에 매우 좋은 솔루션이므로, 우리는 CSS "flex"로 우리의 tbody와 광고 요소를 만들 것입니다.

.ea_table {
  border: 1px solid #ddd;
  display: block;
  background: #fff;
  overflow-y: hidden;
  box-sizing: border-box;
  float: left;
  height:auto;
  width: 100%;
}

.ea_table tbody, thead {
  flex-direction: column;
  display: flex;
}

.ea_table tbody {
  height: 300px;
  overflow: auto;
}

.ea_table thead {
  border-bottom: 1px solid #ddd;
}

.ea_table tr {
  display: flex;
}


.ea_table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
  }

.ea_table td, .ea_table th {
  text-align: left;
  font-size: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}
<table class="ea_table">
    <thead>
      <tr>
        <th>Something Long</th>
        <th>Something </th>
        <th>Something Very Long</th>
        <th>Something Long</th>
        <th>Some</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>

    </tbody>

  </table>

jfiddle

"display:block;" tobody로 시도해야 합니다. 지금은 인라인 블록이고 높이를 설정하려면 요소가 "block"이어야 하기 때문입니다.

저는 끈적끈적한 테이블 헤더 라이브러리를 작동시키는 데 많은 어려움을 겪었습니다.좀 더 검색해보니 플로트가이 광고는 최근 업데이트와 더 나은 문서를 통해 적극적으로 유지되는 대안입니다.

나는 플로트를 사용했습니다.adjQuery 플러그인(https://mkoryak.github.io/floatThead/ #intro)

문서에서는 부트스트랩 3 테이블에서 작동한다고 하며 테이블 응답 도우미가 있든 없든 부트스트랩 4 테이블에서도 작동한다고 말할 수 있습니다.

플러그인 사용은 다음과 같이 간단합니다.

HTML(vanilla 부트스트랩 테이블 마크업)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

플러그인 초기화:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

전체 면책 사항:플러그인과 연결되어 있지 않습니다.여러 가지 다른 솔루션을 몇 시간 동안 시도한 끝에 우연히 이 솔루션을 발견했습니다.

먼저 부트스트랩 테이블에 대한 마크업을 추가합니다.여기서 스트라이프 테이블을 만들었지만 사용자 지정 테이블 클래스도 추가했습니다..table-scroll테이블에 수직 스크롤 막대를 추가하고 아래로 스크롤하는 동안 테이블 헤더를 고정합니다.

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}

전체 높이의 테이블(테이블이 아닌 페이지 스크롤)

참고: 전체를 이동합니다.<thead>...</thead>왜냐하면 저의 경우 두 줄(제목 및 필터)이 있었기 때문입니다.

JS 포함(jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS(스타일링 전용)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}

이제 "모든" 브라우저가 ES6를 지원하므로 위의 다양한 제안을 테이블을 인수로 사용하고 본문을 스크롤할 수 있는 JavaScript 클래스에 통합했습니다.브라우저의 레이아웃 엔진에서 헤더 및 본문 셀 너비를 결정한 다음 열 너비가 서로 일치하도록 합니다.

테이블의 높이를 명시적으로 설정하거나 브라우저 창의 나머지 부분을 채우도록 만들 수 있으며 뷰포트 크기 조정 및/또는 이벤트에 대한 콜백을 제공합니다.details요소가 열리거나 닫힙니다.

다중 행 헤더 지원을 사용할 수 있으며, WCAC 지침에 지정된 접근성을 위해 테이블이 id/headers 속성을 사용하는 경우 특히 효과적입니다. 이는 보기만큼 부담스러운 요구 사항이 아닙니다.

이 코드는 라이브러리에 의존하지 않지만 사용 중인 라이브러리와 잘 호환됩니다.(JQuery를 사용하는 페이지에서 테스트됨).

코드와 샘플 사용량은 Github에서 확인할 수 있습니다.

이것은 컨텐츠 스크롤 가능 테이블에 대한 나의 구현입니다.div요소 및 순수 CSS Flexbox 스타일링.

.table {
  display: flex;
  flex-direction: column;
  background-color: lightblue;
  width: 600px;
  height: 200px;
  font-family: "Courier New";
}

.header {
  display: flex;
  flex-direction: row;
  background-color: whitesmoke;
  padding-right: 10px;
  font-weight: bold;
}

.row {
  border-bottom: 1px solid gainsboro;
}

.row>div {
  width: 25%;
  text-align: left;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.entry {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
}


/* 
Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element.
We need the scroll bar width set so as to apply same padding in the table header row for alignment. 
*/


/* width */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: whitesmoke;
  border-radius: 2px;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 2px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: grey;
}
<div class="table">
  <div class="header row">
    <div>Fruit</div>
    <div>Price</div>
    <div>Quantity</div>
    <div>In Stock</div>
  </div>
  <div class="content">
    <div class="entry row">
      <div>Apple</div>
      <div>$10</div>
      <div>100</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Pear</div>
      <div>$2</div>
      <div>900</div>
      <div>No</div>
    </div>
    <div class="entry row">
      <div>Orange</div>
      <div>$3</div>
      <div>123400</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Mongosteen</div>
      <div>$80</div>
      <div>5</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Durian</div>
      <div>$120</div>
      <div>988</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Apple</div>
      <div>$10</div>
      <div>100</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Pear</div>
      <div>$2</div>
      <div>900</div>
      <div>No</div>
    </div>
    <div class="entry row">
      <div>Orange</div>
      <div>$3</div>
      <div>123400</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Mongosteen</div>
      <div>$80</div>
      <div>5</div>
      <div>Yes</div>
    </div>
    <div class="entry row">
      <div>Durian</div>
      <div>$120</div>
      <div>988</div>
      <div>Yes</div>
    </div>
  </div>
</div>

See the Pen 내용 스크롤 가능 표 - CSS만 해당 by Ruifeng Ma ( @카미풍) on 코드펜.

지금은 어떤 가치가 있든지 간에: HTML과 CSS가 있는 자매 스레드 테이블 스크롤에 대한 솔루션을 게시했습니다.

  • 두 개의 테이블을 사용합니다(하나는 헤더 전용, 다른 하나는 브라우저에 의해 레이아웃됨).
  • 레이아웃 후 상단(테이블만 해당) 테이블을 하단 테이블의 너비로 조정합니다.
  • 숨김(visibility,것은 아니다.display) 하위 테이블의 헤더 및 하위 테이블을 div에서 스크롤할 수 있도록 합니다.

이 솔루션은 사용되는 모든 스타일/프레임워크에 구애받지 않으므로 여기서도 유용할 수 있습니다.

HTML과 CSS가 포함된 테이블 스크롤에 대한 자세한 설명이 있습니다. / 코드는 다음 펜에도 있습니다. https://codepen.io/sebredhh/pen/QmJvKy

청정 솔루션(CSS만 해당)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

그리드를 이용한 멋진 솔루션을 찾았습니다!이것이 제가 사용한 것이고 완벽하게 작동했습니다.

tbody tr, thead tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}

tbody {
  height: 300px; // or whatever height
  width: 100%;
  overflow-y: auto;
  display: block;
}

데모: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x

원래 게시물의 댓글에 Hasshem Qolami의 stackoverflow.com/a/17380697/1725764, 링크를 사용하고 플로트 대신 display:slot-blocks를 사용했습니다.테이블에 클래스 'table-boundary'가 있는 경우에도 경계를 수정합니다.

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

그러면 td와 th의 폭만 더하면 됩니다.

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

을 이렇게 한 테이블을 . 합니다. 변경합니다.overflow-yoverflow-x테이블을 수평으로 스크롤할 수 있도록 합니다.그저.overflow테이블을 수평 및 수직으로 스크롤할 수 있도록 합니다.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

<style>

thead, tbody
{
    display: block;
}

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

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

6개 정도의 CSS 솔루션은 모두 짧은 테이블을 가정했습니다.이것들은 수백 개의 줄로 테스트를 했어야 했습니다.

@Roko C를 기반으로 합니다.answer first Buljan 변답, 행를려고하면첫번만째가하추범위▁bul,번만.th▁▁be 될 것입니다.fixed스크롤할 때.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th rowspan="3">TH 1</th>
        <th>TH 2.1</th>
        <th>TH 3.1</th>
      </tr>
      <tr >
        <th>TH 2.2</th>
        <th>TH 3.2</th>
      </tr>
      <tr >
        <th>TH 2.3</th>
        <th>TH 3.3</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td><td>A3</td></tr>
      <tr><td>B1</td><td>B2</td><td>B3</td></tr>
      <tr><td>C1</td><td>C2</td><td>C3</td></tr>
      <tr><td>D1</td><td>D2</td><td>D3</td></tr>
      <tr><td>E1</td><td>E2</td><td>E3</td></tr>
    </tbody>
  </table>
</div>

행 범위를 수정하려는 경우 이 줄을 추가할 수 있습니다.

.tableFixHead thead tr:nth-child(2) th {
    top: 34px; /* change the number according to your need  */
}

.tableFixHead thead tr:nth-child(3) th {
    top: 68px; /* change the number according to your need  */
}

예를 들어 이 스니펫을 확인할 수 있습니다.

.tableFixHead          { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

.tableFixHead thead tr:nth-child(2) th {
    top: 34px; /* change the number according to your need  */
}

.tableFixHead thead tr:nth-child(3) th {
    top: 68px; /* change the number according to your need  */
}

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th rowspan="3">TH 1</th>
        <th>TH 2.1</th>
        <th>TH 3.1</th>
      </tr>
      <tr >
        <th>TH 2.2</th>
        <th>TH 3.2</th>
      </tr>
      <tr >
        <th>TH 2.3</th>
        <th>TH 3.3</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td><td>A3</td></tr>
      <tr><td>B1</td><td>B2</td><td>B3</td></tr>
      <tr><td>C1</td><td>C2</td><td>C3</td></tr>
      <tr><td>D1</td><td>D2</td><td>D3</td></tr>
      <tr><td>E1</td><td>E2</td><td>E3</td></tr>
    </tbody>
  </table>
</div>

은 위의스은사수용가번동작으로 수동으로 합니다.nth-child(number)

첫 번째 div(헤더)에는 투명 스크롤 막대가 있고 두 번째 div에는 가시/자동 스크롤 막대가 있는 데이터가 있는 두 개의 div를 배치할 수 있습니다.샘플에 데이터를 순환하기 위한 각 코드 조각이 있습니다.

아래 코드는 나에게 효과가 있었습니다.

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

머리글 스크롤 막대를 숨기기 위한 추가 스타일 -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>


table {

    display: block;
}

thead, tbody {
    display: block;
}
tbody {
    position: absolute;
    height: 150px;
    overflow-y: scroll;
}
td, th {
    min-width: 100px !important;
    height: 25px !important;
    overflow:hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">


<table>
         <thead>
        <tr>
             <th>Col1</th>
            <th>Col2</th>
            <th>Username</th>
            <th>Password</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Col16</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
            <th>Col11</th>
            <th>Col12</th>
            <th>Col13</th>
            <th>Col14</th>
            <th>Col15</th>
            <th>Col16</th>
            <th>Col17</th>
            <th>Col18</th>
        </tr>
              </thead>
         <tbody>
         </tbody>
          <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
         </table>



</div>`enter code here`

고정 너비 없이 쉽게 사용할 수:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

원천

이제 onLoad에서 너비를 조정하려면 다음 jquery 스크립트를 추가하십시오.

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

언급URL : https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body

반응형

'programing' 카테고리의 다른 글

입력 번호에서 위쪽 및 아래쪽 화살표 버튼(스피너) 숨기기 - Firefox 29  (0) 2023.07.30
도커 추가 대 볼륨  (0) 2023.07.30
이름이 '수신자'인 양식 제어에 대한 값 접근자가 없습니다.  (0) 2023.07.25
정확히 무엇이 "HEREARCHY_REQUEST_ERR: DOM 예외 3"-오류를 일으킬 수 있습니까?  (0) 2023.07.25
M1 Mac의 'root'@'localhost' 사용자에 대해 'mysql_upgrade' 액세스가 거부되었습니다.  (0) 2023.07.25

'programing'의 다른글

  • 현재글테이블 고정 헤더 및 스크롤 가능한 본문

관련글

댓글

티스토리툴바