development

tbody 내부에 세로 스크롤이있는 100 % 너비의 HTML 테이블

big-blog 2020. 2. 25. 22:48
반응형

tbody 내부에 세로 스크롤이있는 100 % 너비의 HTML 테이블


<table>너비 100 %로 설정하고 <tbody>세로 스크롤 안에 만 높이를 넣을 수 있습니까?

tbody 내부의 세로 스크롤

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}
  
<table>
  <thead>
    <tr>
    	<th>Head 1</th>
    	<th>Head 2</th>
    	<th>Head 3</th>
    	<th>Head 4</th>
    	<th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>Content 1</td>
    	<td>Content 2</td>
    	<td>Content 3</td>
    	<td>Content 4</td>
    	<td>Content 5</td>
    </tr>
  </tbody>
</table>

나는 변화를 표시 할 때 나는 몇 가지 추가 사업부를 추가 피하고 싶은, 내가 원하는 모든이 같은 간단한 테이블과 table-layout, position및 CSS 테이블에 훨씬 더 많은 일들 만 픽셀의 고정 폭이 100 % 폭으로 잘 작동하지 않습니다.


<tbody>요소를 스크롤 가능 하게 하려면 페이지에 표시되는 방식을 변경해야합니다. 즉 display: block;, 요소를 블록 수준 요소로 표시하는 데 사용 합니다.

display속성을 tbody변경 thead하므로 테이블 레이아웃이 깨지지 않도록 요소의 속성을 변경해야 합니다.

그래서 우리는 :

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

웹 브라우저 는 기본적으로 theadtbody요소를 행 그룹 ( table-header-grouptable-row-group)으로 표시합니다.

일단 변경하면 내부 tr요소가 컨테이너의 전체 공간을 채우지 않습니다.

이를 해결하려면 tbody너비를 계산하고 theadJavaScript를 통해 해당 값을 열에 적용해야합니다 .

자동 너비 열

위 로직의 jQuery 버전은 다음과 같습니다.

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    

다음은 출력입니다 (Windows 7 Chrome 32) .

tbody 내부의 세로 스크롤

작업 데모 .

전체 너비 테이블, 상대 너비 열

원본 포스터가 필요 했으므로 컨테이너의 table100 %까지 확장 width한 다음 테이블의 각 열에 대해 상대 ( 백분율 )를 width사용할 수 있습니다.

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

테이블에는 유체 레이아웃이thead 있으므로 컨테이너 크기를 조정할 때 열 너비를 조정해야합니다 .

따라서 창 크기를 조정하면 열 너비를 설정해야합니다.

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

결과는 다음과 같습니다.

tbody 내부에 세로 스크롤이있는 유체 테이블

작업 데모 .


브라우저 지원 및 대안

새로운 버전의 주요 웹 브라우저 (IE10 + 포함)를 통해 Windows 7에서 위의 두 가지 방법을 테스트했으며 작동했습니다.

그러나 IE9 이하에서는 제대로 작동 하지 않습니다 .

테이블 레이아웃 에서 모든 요소는 동일한 구조적 속성을 따라야 하기 때문 입니다 .

사용하여 display: block;을 위해 <thead><tbody>요소, 우리는 테이블 구조를 파괴했습니다.

JavaScript를 통한 레이아웃 재 설계

한 가지 방법은 (전체) 테이블 레이아웃을 다시 디자인하는 것입니다. JavaScript를 사용하여 즉시 새 레이아웃을 생성하고 셀의 너비 / 높이를 동적으로 처리 및 / 또는 조정합니다.

예를 들어 다음 예를 살펴보십시오.

중첩 테이블

이 방법은 div가 포함 된 두 개의 중첩 테이블을 사용합니다. 첫 번째 table셀에는 하나의 셀만 div있고 두 번째 테이블은 해당 div요소 안에 있습니다.

CSS Play 에서 세로 스크롤 테이블확인하십시오 .

이것은 대부분의 웹 브라우저에서 작동합니다. JavaScript를 통해 위의 논리를 동적으로 수행 할 수도 있습니다.

스크롤에 고정 헤더가있는 테이블

(가)에 수직 스크롤바 추가의 목적 때문에 <tbody>테이블 표시되는 헤더를 각 행의 상단을, 우리 수 위치thead 요지 소자 fixed대신 화면 상단.

Julien 이 수행 한이 접근법 실무 데모 는 다음과 같습니다 . 유망한 웹 브라우저 지원이 있습니다.

그리고 여기 순수 CSS에 의해 구현 빌렘 반 Bockstal .


순수한 CSS 솔루션

여기에 오래된 대답이 있습니다. 물론 새로운 방법을 추가하고 CSS 선언을 개선했습니다.

너비가 고정 된 테이블

이 경우 table에는 고정되어 있어야합니다 width (열 너비와 세로 스크롤 막대 너비의 합계 포함) .

열은 특정 있어야 앤드 마지막 항목thead요소가 더 요구 다른 '으로 동일 +를 가로 세로 스크롤 바있다.

따라서 CSS는 다음과 같습니다.

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

출력은 다음과 같습니다.

너비가 고정 된 테이블

작업 데모 .

너비가 100 % 인 테이블

이 방법에서의 table너비는 100%각각 thtd의 값 width이보다 작아야 100% / number of cols합니다.

또한, 우리는 줄일 필요가 의을 thead의 값으로 수직 스크롤 바의.

그렇게하려면 calc()다음과 같이 CSS3 함수 를 사용해야 합니다.

table {
    width: 100%;
    border-spacing: 0;
}

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

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

다음은 온라인 데모 입니다.

참고 : 이 방법은 각 열의 내용이 줄을 바꾸면 실패 합니다. 즉 , 각 셀의 내용이 충분히 짧아야합니다 .


다음에는 이 질문에 대답 할 때 만든 순수한 CSS 솔루션 의 간단한 두 가지 예가 있습니다.

다음은 jsFiddle Demo v2 입니다.

이전 버전 : jsFiddle Demo v1


다음 솔루션에서 테이블은 부모 컨테이너의 100 %를 차지하며 절대 크기는 필요하지 않습니다. 순수한 CSS이며 플렉스 레이아웃이 사용됩니다.

그 모습은 다음과 같습니다. 여기에 이미지 설명을 입력하십시오

가능한 단점 :

  • 세로 스크롤 막대는 필요한지 여부에 관계없이 항상 표시됩니다.
  • 테이블 레이아웃은 고정되어 있습니다. 열은 내용 너비에 따라 크기가 조정되지 않습니다 (여러분은 명시 적으로 원하는 열 너비를 설정할 수 있습니다).
  • 하나의 절대 크기가 있습니다-스크롤 막대의 너비는 확인할 수있는 브라우저의 경우 약 0.9em입니다.

HTML (단축) :

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            ...
        </tbody>
    </table>
</div>

명확성을 위해 일부 장식이 생략 된 CSS :

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

jsfiddle의 전체 코드

LESS와 동일한 코드이므로 다음과 같이 혼합 할 수 있습니다.

.table-scrollable() {
  @scrollbar-width: 0.9em;
  display: flex;
  flex-flow: column;

  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }

  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }

  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;

    tr {
      width: 100%;
    }
  }
}

최신 브라우저에서는 간단히 CSS를 사용할 수 있습니다.

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

display:blockfor thead및을 사용 하고 tbody있습니다. 이 때문에 thead열의 너비는 열의 너비와 다릅니다 tbody.

table {
    margin:0 auto; 
    border-collapse:collapse;
}
thead {
    background:#CCCCCC;
    display:block
}
tbody {
    height:10em;overflow-y:scroll;
    display:block
}

이 문제를 해결하기 위해 작은 jQuery코드를 사용 하지만 수행 할 수 있습니다 JavaScript.

var colNumber=3 //number of table columns    

for (var i=0; i<colNumber; i++) {
  var thWidth=$("#myTable").find("th:eq("+i+")").width();
  var tdWidth=$("#myTable").find("td:eq("+i+")").width();      
  if (thWidth<tdWidth)                    
      $("#myTable").find("th:eq("+i+")").width(tdWidth);
  else
      $("#myTable").find("td:eq("+i+")").width(thWidth);           
}  

작업 데모는 다음과 같습니다. http://jsfiddle.net/gavroche/N7LEF/

IE 8에서는 작동하지 않습니다

var colNumber=3 //number of table columns


for (var i=0; i<colNumber; i++)
  {
      var thWidth=$("#myTable").find("th:eq("+i+")").width();
      var tdWidth=$("#myTable").find("td:eq("+i+")").width();      
      if (thWidth<tdWidth)                    
          $("#myTable").find("th:eq("+i+")").width(tdWidth);
      else
          $("#myTable").find("td:eq("+i+")").width(thWidth);           
  }  
 table {margin:0 auto; border-collapse:separate;}
 thead {background:#CCCCCC;display:block}
 tbody {height:10em;overflow-y:scroll;display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" border="1">
    <thead>
        <tr>
            <th>A really Very Long Header Text</th>
            <th>Normal Header</th>
            <th>Short</th>            
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
    </tbody>
</table>


차례로 두 개의 테이블을 작성하고 두 번째 테이블을 고정 된 높이의 div에 놓고 overflow 특성을 auto로 설정하십시오. 또한 두 번째 테이블의 광고 안에있는 모든 td를 비워 두십시오.

<div>
    <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
                <th>Head 4</th>
                <th>Head 5</th>
            </tr>
        </thead>
    </table>
</div>

<div style="max-height:500px;overflow:auto;">
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        </tbody>
    </table>    
</div>

CSS 만

대한 크롬, 파이어 폭스, 에지 (및 기타 상록 브라우저)

단순히 position: sticky; top: 0;당신의 th요소 :

/* Fix table head */
.tableFixHead    { overflow-y: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }

/* 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>

추신 : TH 요소에 테두리 가 필요한 경우 th {box-shadow: 1px 1px 0 #000; border-top: 0;}기본 테두리가 스크롤에 올바르게 그려지지 않기 때문에 도움이됩니다.

IE11 을 수용하기 위해 약간의 JS를 사용하는 위의 변형에 대해서는 https://stackoverflow.com/a/47923622/383904를 참조하십시오.


다음 지침에 따라 순수 CSS로 마침내 그것을 얻었습니다.

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

첫 단계는 <tbody>오버플로와 높이를 적용 할 수 있도록 display : 블록 을 설정하는 것입니다. 거기에서 행의 행은 <thead>position : relative 및 display : block으로 설정되어 이제 scrollable 위에 배치 <tbody>됩니다.

tbody, thead { display: block; overflow-y: auto; }

(가) 때문에 <thead>상대적으로 위치되는 각각의 테이블 셀 명시 폭 필요

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

그러나 불행히도 충분하지 않습니다. 스크롤바가 있으면 브라우저가이를위한 공간을 할당하므로 결국 <tbody>보다 사용 가능한 공간이 줄어 듭니다 <thead>. 이로 인해 약간의 정렬 불량이 발생합니다 ...

내가 취할 수있는 유일한 해결 방법은 마지막 열을 제외한 모든 열에 최소 너비를 설정하는 것입니다.

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

아래의 전체 코드 펜 예제 :

CSS :

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333333;
  color: #fdfdfd;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #dddddd;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

HTML :

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

<!--[if lte IE 9]>
</div>
<!--<![endif]-->

편집 : 테이블 너비 100 %에 대한 대체 솔루션 (위의 고정 너비에 대한 것이며 질문에 대답하지 않았습니다) :

HTML :

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

CSS :

table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody { 
  height: 150px; 
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* some colors */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

데모 : http://codepen.io/anon/pen/bNJeLO


'block'tbody로 열을 올바르게 표시하기위한 CSS 해결 방법

이 솔루션은 여전히 thjQuery로 너비를 계산하고 설정 해야합니다.

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

그리고 Jquery / Javascript

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

    // Get the tbody columns width array
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

}).resize(); // Trigger resize handler

구현하기가 매우 간단하고 쉬운 방법을 시도하십시오.

아래는 jsfiddle 링크입니다

http://jsfiddle.net/v2t2k8ke/2/

HTML :

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

CSS :

 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

jquery :

 var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '<tr>';
       $.each(value, function (key, value) {
       stb += '<td>' + value + '</td>';
       });
       stb += '</tr>';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

tbody & thead 디스플레이 블록을 완벽하게 작동 시킨 후 td에 고정 너비를 추가하면 슬림 스크롤 플러그인을 사용하여 스크롤 막대를 아름답게 만들 수 있습니다 .

여기에 이미지 설명을 입력하십시오

<!DOCTYPE html>
<html>

<head>
    <title> Scrollable table </title>
    <style>
        body {
            font-family: sans-serif;
            font-size: 0.9em;
        }
        table {
            border-collapse: collapse;
            border-bottom: 1px solid #ddd;
        }
        thead {
            background-color: #333;
            color: #fff;
        }
        thead,tbody {
            display: block;
        }
        th,td {
            padding: 8px 10px;
            border: 1px solid #ddd;
            width: 117px;
            box-sizing: border-box;
        }
        tbody {
            height: 160px;
            overflow-y: scroll
        }
    </style>
</head>

<body>

    <table class="example-table">
        <thead>
            <tr>
                <th> Header 1 </th>
                <th> Header 2 </th>
                <th> Header 3 </th>
                <th> Header 4 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Row 1- Col 1 </td>
                <td> Row 1- Col 2 </td>
                <td> Row 1- Col 3 </td>
                <td> Row 1- Col 4 </td>
            </tr>
            <tr>
                <td> Row 2- Col 1 </td>
                <td> Row 2- Col 2 </td>
                <td> Row 2- Col 3 </td>
                <td> Row 2- Col 4 </td>
            </tr>
            <tr>
                <td> Row 3- Col 1 </td>
                <td> Row 3- Col 2 </td>
                <td> Row 3- Col 3 </td>
                <td> Row 3- Col 4 </td>
            </tr>
            <tr>
                <td> Row 4- Col 1 </td>
                <td> Row 4- Col 2 </td>
                <td> Row 4- Col 3 </td>
                <td> Row 4- Col 4 </td>
            </tr>
            <tr>
                <td> Row 5- Col 1 </td>
                <td> Row 5- Col 2 </td>
                <td> Row 5- Col 3 </td>
                <td> Row 5- Col 4 </td>
            </tr>
            <tr>
                <td> Row 6- Col 1 </td>
                <td> Row 6- Col 2 </td>
                <td> Row 6- Col 3 </td>
                <td> Row 6- Col 4 </td>
            </tr>
            <tr>
                <td> Row 7- Col 1 </td>
                <td> Row 7- Col 2 </td>
                <td> Row 7- Col 3 </td>
                <td> Row 7- Col 4 </td>
            </tr>
            <tr>
                <td> Row 8- Col 1 </td>
                <td> Row 8- Col 2 </td>
                <td> Row 8- Col 3 </td>
                <td> Row 8- Col 4 </td>
            </tr>
            <tr>
                <td> Row 9- Col 1 </td>
                <td> Row 9- Col 2 </td>
                <td> Row 9- Col 3 </td>
                <td> Row 9- Col 4 </td>
            </tr>
            <tr>
                <td> Row 10- Col 1 </td>
                <td> Row 10- Col 2 </td>
                <td> Row 10- Col 3 </td>
                <td> Row 10- Col 4 </td>
            </tr>
            <tr>
                <td> Row 11- Col 1 </td>
                <td> Row 11- Col 2 </td>
                <td> Row 11- Col 3 </td>
                <td> Row 11- Col 4 </td>
            </tr>
            <tr>
                <td> Row 12- Col 1 </td>
                <td> Row 12- Col 2 </td>
                <td> Row 12- Col 3 </td>
                <td> Row 12- Col 4 </td>
            </tr>
            <tr>
                <td> Row 13- Col 1 </td>
                <td> Row 13- Col 2 </td>
                <td> Row 13- Col 3 </td>
                <td> Row 13- Col 4 </td>
            </tr>
            <tr>
                <td> Row 14- Col 1 </td>
                <td> Row 14- Col 2 </td>
                <td> Row 14- Col 3 </td>
                <td> Row 14- Col 4 </td>
            </tr>
            <tr>
                <td> Row 15- Col 1 </td>
                <td> Row 15- Col 2 </td>
                <td> Row 15- Col 3 </td>
                <td> Row 15- Col 4 </td>
            </tr>
            <tr>
                <td> Row 16- Col 1 </td>
                <td> Row 16- Col 2 </td>
                <td> Row 16- Col 3 </td>
                <td> Row 16- Col 4 </td>
            </tr>
        </tbody>
    </table>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <script>
        $('.example-table tbody').slimscroll({
            height: '160px',
            alwaysVisible: true,
            color: '#333'
        })
    </script>
</body>

</html>


이것은 스크롤 가능한 tbody가있는 테이블에 스티커 thead를 만드는 데 도움이되는 코드입니다.

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

"오버 플로우 : 스크롤"을 사용하려면 thead 및 tbody에서 "display : block"을 설정해야합니다. 그리고 그것은 그들 사이의 열 너비를 엉망으로 만듭니다. 그러나 자바 스크립트로 thead 행을 복제하고 tbody에 숨겨진 행으로 붙여 넣어 정확한 열 너비를 유지할 수 있습니다.

$('.myTable thead > tr').clone().appendTo('.myTable tbody').addClass('hidden-to-set-col-widths');

http://jsfiddle.net/Julesezaar/mup0c5hk/

<table class="myTable">
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>blah</td>
            <td>derp</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<p>
  Some text to here
</p>

CSS :

table {
  background-color: #aaa;
  width: 100%;
}

thead,
tbody {
  display: block; // Necessary to use overflow: scroll
}

tbody {
  background-color: #ddd;
  height: 150px;
  overflow-y: scroll;
}

tbody tr.hidden-to-set-col-widths,
tbody tr.hidden-to-set-col-widths td {
  visibility: hidden;
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

td {
  padding: 3px 10px;
}

jsfiddle을 사용해보십시오 . 이것은 jQuery를 사용하고 Hashem Qolami의 답변으로 만들었습니다. 처음에는 일반 테이블을 만든 다음 스크롤 가능하게 만드십시오.

const makeScrollableTable = function (tableSelector, tbodyHeight) {
  let $table = $(tableSelector);
  let $bodyCells = $table.find('tbody tr:first').children();
  let $headCells = $table.find('thead tr:first').children();
  let headColWidth = 0;
  let bodyColWidth = 0;

  headColWidth = $headCells.map(function () {
    return $(this).outerWidth();
  }).get();
  bodyColWidth = $bodyCells.map(function () {
    return $(this).outerWidth();
  }).get();

  $table.find('thead tr').children().each(function (i, v) {
    $(v).css("width", headColWidth[i]+"px");
    $(v).css("min-width", headColWidth[i]+"px");
    $(v).css("max-width", headColWidth[i]+"px");
  });
  $table.find('tbody tr').children().each(function (i, v) {
    $(v).css("width", bodyColWidth[i]+"px");
    $(v).css("min-width", bodyColWidth[i]+"px");
    $(v).css("max-width", bodyColWidth[i]+"px");
  });

  $table.find('thead').css("display", "block");
  $table.find('tbody').css("display", "block");

  $table.find('tbody').css("height", tbodyHeight+"px");
  $table.find('tbody').css("overflow-y", "auto");
  $table.find('tbody').css("overflow-x", "hidden");

};

참고 URL : https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody



반응형