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

질문 : 너비가 100 %이고 tbody 내부에 세로 스크롤이있는 HTML 표

---

<table> 100 % 너비로 설정하고 일부 높이에 대해 <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>

추가 div를 추가하는 것을 피하고 싶습니다. 원하는 것은 이와 같은 간단한 테이블 table-layout , position 및 훨씬 더 많은 것을 변경하려고 할 때 픽셀의 고정 너비로만 100 % 너비로 잘 작동하지 않습니다. .

답변

---

<tbody> 요소를 스크롤 가능하게 만들려면 페이지에 표시되는 방식을 변경해야합니다. 예를 들어 display: block; 블록 레벨 요소로 표시합니다.

tbody 의 display 속성을 변경 했으므로 테이블 레이아웃이 깨지지 않도록 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 */
}

웹 브라우저 thead 및 tbody 요소를 행 그룹 ( table-header-group 및 table-row-group )으로 표시합니다.

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

tbody 열의 너비를 계산하고 JavaScript를 통해 thead 열에 해당 값을 적용해야합니다.

Auto Width Columns

위 로직의 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) .

작업 데모 .

Full Width Table, Relative Width Columns

원본 포스터가 필요하면 width 의 100 %로 table 각 열에 대해 상대적인 ( Percentage ) 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

출력은 다음과 같습니다.

작업 데모 .

---

 

반응형

 

브라우저 지원 및 대안

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

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

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

display: block; <thead> 및 <tbody> 요소에 대해 테이블 구조를 깨뜨 렸습니다.

 

JavaScript를 통한 레이아웃 재설계

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

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

• jQuery .floatThead () 플러그인 (부동 / 잠김 / 고정 테이블 헤더 플러그인)
• jQuery Scrollable Table 플러그인. (github의 소스 코드)
• jQuery .FixedHeaderTable () 플러그인 (github의 소스 코드)
• DataTables 세로 스크롤 예제.

 

중첩 테이블

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

CSS Play 에서 세로 스크롤 테이블 을 확인하세요.

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

 

스크롤에 머리글이 고정된 테이블

<tbody> 세로 스크롤 막대를 추가하는 목적은 각 행의 상단에 테이블 헤더 를 표시하는 것이므로 대신 화면 상단에 fixed 되도록 thead 요소를 배치 할 수 있습니다.

다음은 Julien 이 수행 한이 접근 방식 의 작업 데모 입니다.
유망한 웹 브라우저 지원이 있습니다.

그리고 여기 에 Willem Van Bockstal 의 순수한 CSS 구현이 있습니다.

여기에 오래된 대답이 있습니다. 물론 새로운 메서드를 추가하고 CSS 선언을 다듬 었습니다.

---

The Pure CSS Solution

이 경우 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% 이고 각 th 및 td 에 대해 width 100% / number of cols 보다 작아야합니다.

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

이를 위해서는 다음과 같이 calc()

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

출처 : https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody