Webkit 브라우저에서 TBODY를 스크롤 가능하게 만들기
이 질문을 알고 있지만 Safari, Chrome 등에서는 어떤 답변도 작동하지 않습니다.
허용되는 전략 ( 여기에 설명 된대로 )은 다음과 같이 tbody 높이 및 오버플로 속성을 설정하는 것입니다.
<table>
<thead>
<tr><th>This is the header and doesn't scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
불행히도 이것은 어떤 웹킷 브라우저에서도 작동하지 않습니다. 있습니다 버그 리포트 높은 우선 순위를 될 것 같지 않습니다 그것에 대해는 (6 월 05보고).
그래서 제 질문은 실제로 작동하는 대체 전략이 있습니까? 두 테이블 접근 방식을 시도했지만 헤더가 콘텐츠와 일치하는지 보장 할 수 없습니다. Webkit이 고칠 때까지 기다려야합니까?
다음은 작동하는 예입니다.
http://www.imaputz.com/cssStuff/bigFourVersion.html
thead> tr 및 tbody에 display : block을 추가해야합니다.
display : block 스타일 사용은 열이 1 개인 경우에만 작동합니다. 여러 필드가있는 여러 데이터 열이있는 경우 display : block은 모든 데이터 열을 스크롤 가능하게 만들지 만 첫 번째 열 아래에 나타납니다 (Firefox에서 동일하게 작동합니다.이 브라우저는 잘 스크롤하는 유일한 브라우저입니다). 덧붙여서 Firefox에서는 overflow-x : hidden 스타일을 사용하여 가로 스크롤을 억제 할 수 있습니다.
내가 언급 한 문제는 th & td 요소의 너비를 지정하지 않는 경우에만 발생한다는 것을 깨달았습니다. 열 너비를 수정할 수 있으면 작동합니다. 나에게 문제는 열 너비를 수정할 수 없다는 것입니다.
이 페이지의 첫 번째 방법, 단일 테이블이있는 순수한 CSS (테이블 주위에 2 개 div, thead는 절대 위치) : http://www.cssplay.co.uk/menu/tablescroll.html 작업 할 것 같습니다. IE7 / FF3.6에 추가 된 FF4 / IE9 / IE8.
나는 같은 문제가 있었고 나를 위해 이것을하기 위해 jQuery 스크립트를 작성했습니다 ... 두 개의 테이블 요소를 사용하고 그에 따라 CSS를 형식화합니다. 이것이 같은 문제를 가진 다른 사람들에게 도움이되기를 바랍니다.
Sean Haddy의 뛰어난 솔루션을 보고 자유롭게 편집 할 수있었습니다 .
- ID 대신 클래스를 사용하여 하나의 jQuery 스크립트를 한 페이지의 여러 테이블에 재사용 할 수 있습니다.
- caption, thead, tfoot 및 tbody와 같은 시맨틱 HTML 테이블 요소에 대한 지원이 추가되었습니다.
- 스크롤바를 선택 사항으로 만들었으므로 스크롤 가능한 높이보다 "짧은"테이블에는 나타나지 않습니다.
- 스크롤바가 테이블의 오른쪽 가장자리까지 올라가도록 스크롤링 div의 너비를 조정했습니다.
- 컨셉에 접근 가능
- 삽입 된 정적 테이블 헤더에 aria-hidden = "true"사용
- 원래 thead를 제자리에두고 jQuery로 숨기고
aria-hidden="false"
- 크기가 다른 여러 테이블의 예 표시
하지만 Sean은 무거운 짐을 들었습니다. tfoot 지원의 필요성을 지적한 Matt Burland에게도 감사드립니다.
http://jsfiddle.net/jhfrench/eNP2N/ 에서 직접 확인하십시오.
A는 오래 전에 같은 문제에 직면했고 마침내 두 테이블 접근 방식을 설정했습니다. 결과 : http://jsfiddle.net/bGr4V/3/ , 모든 브라우저에서 작동합니다 (IE6 + 포함).
이 jsFiddle 에서는 깨끗한 버전으로 재생할 수 있습니다.
내 솔루션은 추가했다 수정 세포 <th class="fix"> </th>
에서 thead
의 스크롤 바의 공간을 채우기 위해를 tbody
한 후 하나의 열을 가변 폭을 (제공, <td class="grow">
,) 그래서 헤더 수정 셀 크기 조정에서와 UNMATCH 없습니다.
HTML :
<div class="fixed_table">
<div class="head">
<table>
<thead>
<tr>
<th>Column header</th>
<th class="grow">Column header</th>
<th class="fix"> </th>
</tr>
</thead>
</table>
<div class="body">
<table class="full_table">
<caption class="caption">Caption</caption>
<tbody>
<tr>
<td>Data</td>
<td class="grow">Data</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS : has *
and _
hack for ie6-7, and a -webkit
specific for the header fix-cell matching scroll width in each case.
.fixed_table table {
table-layout: fixed;
width: auto;
border-width: 0;
padding: 0;
border-collapse: collapse;
}
.fixed_table .body {
overflow: scroll;
overflow-x: hidden;
max-height: 10.75em;
min-height: 2.5em;
padding-bottom: 0.8em;
*padding-right: 17px; /*ie7 & ie6*/
_padding-right: 0; /*ie6*/
_height: 10em ;
}
.fixed_table th, .fixed_table td {
width: 4.7em;
}
.fixed_table .grow {
width: auto;
}
.fixed_table .fix {
width: 16px;
*width: 17px; /*ie7 & ie6*/
_width: 16px; /*ie6*/
}
/* webkit specific */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.fixed_table .fix{ width: 17px }
}
내 솔루션을 혼합에 넣을 것이라고 생각했습니다-http: //tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .
@Michael Koper의 솔루션과 동일한 기본 경로를 사용하지만 해결 방법이 포함되어 있으므로 IE에서 IE6으로 돌아가서 표가 올바르게 표시됩니다.
<table>
a 를 제공하고 table-layout: fixed
각 열의 셀에 너비를 명시 적으로 할당 하여 너비 문제를 해결합니다 . 이상적이지는 않지만 스크롤바가 필요한지 여부에 관계없이 크로스 브라우저를 정렬하는 의미 테이블을 생성합니다.
데모 : http://codepen.io/tjvantoll/pen/JEKIu
FF에서만 테스트했기 때문에 Firefox 7 이상에서만 작동 하는 위의 문제에 대한 자바 스크립트 솔루션을 개발
했습니다.이 스레드에 와서 Michael Koper가 가리키는 솔루션을 찾았습니다.
이 솔루션에서는 세 가지 중요한 작업이 수행됩니다.
1) 열 너비를 수정합니다.
2) thead> tr 디스플레이가 블록으로 설정됩니다.
3) tbody 디스플레이가 블록으로 설정됩니다.
다른 사람들이 너비를 수정하는 문제를 언급했듯이 나도 같은 위치에 있습니다.
너비를 정적으로 고정 할 수 없어도
그래서 나는 너비를 동적으로 수정할 것이라고 생각했습니다 (테이블이 브라우저에서 렌더링 된 후) 그리고 이것은 트릭을했습니다 :)
다음은 FF에서만 작동하는 자바 스크립트의 솔루션입니다
( FF 에서만 테스트했으며 다른 브라우저에는 액세스 할 수 없습니다)
function test1(){
var tbodys = document.getElementsByTagName("TBODY");
for(var i=0;i<tbodys.length;i++){
do_tbodyscroll(tbodys[i]);
}
}
function do_tbodyscroll(_tbody){
// get the table node
var table = _tbody.parentNode;
// first row of tbody
var _fr = _tbody.getElementsByTagName("TR")[0];
// first row cells ..
var _frcells = _fr.cells;
// Width array , width of each element is stored in this array
var widtharray = new Array(_frcells.length);
for(var i=0;i<_frcells.length;i++){
widtharray[i] = _frcells[i].scrollWidth;
}
// Apply width to first row
for(var i=0;i<_frcells.length;i++){
_frcells[i].width = widtharray[i];
}
// Get the Last row in Thead ...
// COLGROUPS USING COLSPAN NOT YET SUPPORTED
var thead = table.getElementsByTagName("THEAD")[0];
var _rows = thead.getElementsByTagName("TR");
var tableheader = _rows[_rows.length - 1];
var headercells = tableheader.cells;
// Apply width to header ..
for(var i=0;i<headercells.length;i++){
headercells[i].width = widtharray[i];
}
// ADD 16 Pixel of scroll bar to last column ..
headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;
tableheader.style.display = "block";
_tbody.style.display = "block";
}
이 솔루션은 브라우저에서 열의 너비가 무엇인지 알아 내고 너비가 설정된 후
열 (헤더 및 tbody의 첫 번째 행)에 동일한 너비를 다시
설정합니다. thead> tr 및 tbody 디스플레이가 차단으로 설정 됨
이 솔루션이 여러분 모두에게 도움이되기를 바랍니다. ..
다른 브라우저로 확장 할 수 있다면이 게시물에 회신 해주십시오.
이건 정말 아주 해키하지만 어쩌면 누군가의 어딘가에 도움이 될 것입니다 ...
행 대신 열을 사용하므로 처리는 본질적으로 거꾸로 수행됩니다.
IE 호환성을 위해 임시 DOCTYPE이 추가되었습니다.
이 질문에 대해 과잉 일 수 있지만 YUI는 여전히 최고의 무료 크로스 브라우저 데이터 테이블을 제공합니다. 읽기 전용 데이터에도 사용할 수 있습니다.
스크롤 가능한 샘플을 보려면 예제를 클릭하십시오. 저는 stackoverflow의 초보자이기 때문에이 두 링크 만 게시 할 수 있습니다.
추가 display:block;
이것은 또한 FireFox에서 불필요한 수평 스크롤을 제거합니다. 또한 MSIE 8에서는 두 가지 예제가 모두 작동하지 않는다는 사실을 알고 계실 것입니다.
<table>
<thead>
<tr><th>This is the header and doesn't scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;display:block;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
여기에 IE5 +, Firefox 및 Chrome에서 작동하는 예가 있습니다. 그러나 고정 너비 열을 사용합니다. http://www.cssplay.co.uk/menu/tablescroll.html
누구든지 IE 쿼크 모드에서 작동하는 데 필요한 경우 IG Pascual의 코드를 변경하고 단순화 한 방법은 다음과 같습니다.
.fixed_table{
overflow: scroll;
overflow-x: hidden;
max-height: 300px;
height: 300px;
min-height: 50px;
padding-right:0;
}
#datatable td
{
padding:3px;
text-align: center;
width: 9%;
vertical-align: middle;
background-color: #343435;
color: #E0E0E3;
overflow:hidden;
}
<div class="head">
<table>
<thead>
<tr>
<th>Time (GMT)</th>
<th>Price</th>
</tr>
</thead>
</table>
</div>
<div class="fixed_table">
<table id="datatable" cellspacing="1" cellpadding="1">
<tbody></tbody>
</table>
</div>
표를 그대로 그려서 각 열의 너비를 계산하고 각 제목에 설정합니다. 제목은 나눗셈으로 만들어지며 테이블을 자유롭게 스크롤 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.t_heading{
margin-top: 20px;
font-family: Verdana, Geneva, sans-serif;
background-color: #4CAF50;
}
.heading{
background-color: #4CAF50;
color: white;
float:left;
padding: 8px 0PX 8PX 0PX;
border-bottom: 1px solid #ddd;
height: 20px;
text-align: left;
}
.t_data{
overflow-y: scroll;
overflow-x: hidden;
height:0px;
width: 100%;
}
.t_content{
border-collapse: collapse;
font-family: Verdana, Geneva, sans-serif;
width: 100%;
}
.column1,.column2,.column3,.column4{
padding: 8px 0PX 8PX 0PX;
text-align: left;
border-bottom: 1px solid #ddd;
}
.t_row:hover{
background-color:#f5f5f5;
}
</style>
<script>
function setBody(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
height = height-300;
/*
** By changing the subtraction value, You can fit the table in to the screen correctly.
** Make sure not to come the hscroll.
** Or you can set fixed height with css for the div as your wish.
*/
document.getElementById("t_data").style.height = height+"px";
setColumnWidth("column1");
setColumnWidth("column2");
setColumnWidth("column3");
setColumnWidth("column4");
}
function setColumnWidth(o){
var object = o;
var x = document.getElementsByClassName(object);
var y = x[0].clientWidth;
document.getElementById(object).style.width = y+"px";
}
</script>
</head>
<body onload="setBody()">
<div class="t_heading">
<div class="heading" id="column1">Heading 1</div>
<div class="heading" id="column2">Heading 2</div>
<div class="heading" id="column3">Heading 3</div>
<div class="heading" id="column4">Heading 4</div>
</div>
<div class="t_data" id="t_data">
<table class="t_content">
<tr class='t_row'>
<td class='column1'>Column1 Row 0</td>
<td class='column2'>Column2 Row 0</td>
<td class='column3'>Column3 Row 0</td>
<td class='column4'>Column4 Row 0</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 1</td>
<td class='column2'>Column2 Row 1</td>
<td class='column3'>Column3 Row 1</td>
<td class='column4'>Column4 Row 1</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 2</td>
<td class='column2'>Column2 Row 2</td>
<td class='column3'>Column3 Row 2</td>
<td class='column4'>Column4 Row 2</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 3</td>
<td class='column2'>Column2 Row 3</td>
<td class='column3'>Column3 Row 3</td>
<td class='column4'>Column4 Row 3</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 4</td>
<td class='column2'>Column2 Row 4</td>
<td class='column3'>Column3 Row 4</td>
<td class='column4'>Column4 Row 4</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 5</td>
<td class='column2'>Column2 Row 5</td>
<td class='column3'>Column3 Row 5</td>
<td class='column4'>Column4 Row 5</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 6</td>
<td class='column2'>Column2 Row 6</td>
<td class='column3'>Column3 Row 6</td>
<td class='column4'>Column4 Row 6</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 7</td>
<td class='column2'>Column2 Row 7</td>
<td class='column3'>Column3 Row 7</td>
<td class='column4'>Column4 Row 7</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 8</td>
<td class='column2'>Column2 Row 8</td>
<td class='column3'>Column3 Row 8</td>
<td class='column4'>Column4 Row 8</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 9</td>
<td class='column2'>Column2 Row 9</td>
<td class='column3'>Column3 Row 9</td>
<td class='column4'>Column4 Row 9</td>
</tr><tr class='t_row'>
<td class='column1'>Column1 Row 10</td>
<td class='column2'>Column2 Row 10</td>
<td class='column3'>Column3 Row 10</td>
<td class='column4'>Column4 Row 10</td>
</tr>
<!--
<?php
$data = array();
for($a = 0; $a<50; $a++)
{
$data[$a] = array();
$data[$a][0] = "Column1 Row ".$a;
$data[$a][1] = "Column2 Row ".$a;
$data[$a][2] = "Column3 Row ".$a;
$data[$a][3] = "Column4 Row ".$a;
}
/*
** supose you have data in an array.. which red from database. The table will draw using array data. Or you can draw the table manualy.
** tip: If using manual table, No need of
** 'var x = document.getElementsByClassName(object); var y = x[0].clientWidth;'.
** You can just set ID of first row's cells in to some name and use it to read width.
*/
for($i=0;$i<sizeof($data);$i++){
echo "<tr class='t_row'><td class='column1'>".$data[$i][0]."</td><td class='column2'>".$data[$i][1]."</td><td class='column3'>".$data[$i][2]."</td><td class='column4'>".$data[$i][3]."</td></tr>";
}
?>
-->
</table>
</div>
</body>
</html>
참고 URL : https://stackoverflow.com/questions/1019938/make-tbody-scrollable-in-webkit-browsers
'Development Tip' 카테고리의 다른 글
Swift의 C ++ 클래스와 상호 작용 (0) | 2020.11.05 |
---|---|
TouchableNativeFeedback, TouchableHighlight 또는 TouchableOpacity를 언제 사용합니까? (0) | 2020.11.05 |
동일한 이름을 가진 두 개의 입력 요소를 갖는 것이 유효합니까? (0) | 2020.11.05 |
Java를 네이티브 코드로 컴파일 할 수 있습니까? (0) | 2020.11.05 |
.vimrc에서`set nocompatible`은 완전히 쓸모가 없습니까? (0) | 2020.11.05 |