WebKit 브라우저에서 tbody를 스크롤 할 수 있도록하십시오

StackOverflow https://stackoverflow.com/questions/1019938

  •  06-07-2019
  •  | 
  •  

문제

알고 있습니다 이 질문, 그러나 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>

불행히도 이것은 WebKit 브라우저에서는 작동하지 않습니다. 이있다 버그 보고서 그것에 대해 우선 순위가 높지 않은 것 같습니다 (6 월 5 일보고).

그래서 내 질문은 : 실제로 작동하는 대체 전략이 있습니까? 나는 두 테이블 접근법을 시도했지만 헤더가 내용과 일치하도록 보장하는 것은 불가능합니다. WebKit을 고칠 때까지 기다려야합니까?

도움이 되었습니까?

해결책

다음은 작업 예입니다.

http://www.imaputz.com/cssstuff/bigfourversion.html

디스플레이를 추가해야합니다 : Thead> tr 및 tbody에 블록

다른 팁

디스플레이 사용 : 블록 스타일은 1 열이있는 경우에만 작동합니다. 여러 필드가있는 여러 데이터 열이있는 경우 디스플레이 : 블록은 모든 데이터 열을 스크롤 할 수 있지만 첫 번째 열에서 동일하게 수행하는 것으로 보입니다 (Firefox에서 동일합니다. 또한 Firefox에서 오버 플로우 -X : 숨겨진 스타일을 사용하여 수평 스크롤을 억제 할 수 있습니다.

내가 언급 한 문제는 TH & TD 요소의 너비를 지정하지 않는 경우에만 발생한다는 것을 깨달았습니다. 열 너비를 수정할 수 있다면 작동합니다. 나에게 문제는 열 너비를 고칠 수 없다는 것입니다.

이 페이지의 첫 번째 방법 인 단일 테이블이있는 순수한 CSS (테이블 주위에 2 개의 divs, thead는 절대로 배치됩니다)를 사용해보십시오. http://www.cssplay.co.uk/menu/tablescroll.htmlIE7/FF3.6 외에 FF4/IE9/IE8에서 작동하는 것 같습니다.

나는 같은 문제를 겪고 나에게 이것을하기 위해 jQuery 스크립트를 썼습니다 ... 그에 따라 두 개의 테이블 요소와 형식을 사용합니다. 이것이 같은 문제를 가진 다른 사람들을 도울 수 있기를 바랍니다 ...

http://jsfiddle.net/pe295/1/

나는 Sean Haddy 's를 보았다 우수한 솔루션 그리고 자유를 얻었습니다 편집:

  • ID 대신 클래스를 사용하므로 한 페이지의 여러 테이블에 대해 하나의 jQuery 스크립트가 재사용 될 수 있습니다.
  • Caption, Thead, Tfoot 및 TBody와 같은 시맨틱 HTML 테이블 요소에 대한 지원이 추가되었습니다.
  • 스크롤 바 선택적으로 만들어 져서 스크롤 가능한 높이보다 "짧은"테이블에 표시되지 않습니다.
  • 스크롤바를 테이블의 오른쪽 가장자리까지 가져 오도록 조정 된 스크롤 DIV의 너비
  • 개념에 접근 할 수있게 만들었습니다
    • 주입 된 정적 테이블 헤더에서 aria-hidden = "true"사용
    • 그리고 원래의 thead를 제자리에두고 jQuery와 함께 숨겨져 있습니다. aria-hidden="false"
  • 크기가 다른 여러 테이블의 예를 보여주었습니다

그러나 Sean은 무거운 리프팅을했습니다. Matt Burland에게도 TFoot을 지원할 필요가 있습니다.

직접 참조하십시오 http://jsfiddle.net/jhfrench/enp2n/

A는 오래 전에 같은 문제에 직면했고 마침내 두 테이블 접근 방식을 설정했습니다. 결과는 다음과 같습니다. http://jsfiddle.net/bgr4v/3/, 모든 브라우저 (IE6+ 포함)에서 작동합니다.

~ 안에 이 jsfiddle 깨끗한 버전으로 연주 할 수 있습니다.

내 해결책은 a를 추가하는 것이 었습니다 수정 셀 <th class="fix"> </th> 안에 thead 스크롤 막대의 공간을 채우기 위해 tbody, 그런 다음 하나의 열을 가변 너비를 제공합니다 (<td class="grow">), 그래서 헤더 수정 셀 크기 조정에 타의 추종을 불허하지 않을 것입니다.

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 : 가지다 * 그리고 _ IE6-7의 해킹 및 a -webkit 헤더에 따라 다릅니다 수정 셀 각각의 경우 스크롤 너비 일치합니다.

.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에서 테이블이 올바르게 보일 수 있습니다.

나는 너비 문제를 해결함으로써 너비 문제를 해결한다 <table> ㅏ table-layout: fixed 각 열의 셀에 폭을 명시 적으로 할당합니다. 이상적이지는 않지만 스크롤 바가 필요한지 여부에 관계없이 크로스 브라우저를 정렬하는 시맨틱 테이블을 생성합니다.

데모: http://codepen.io/tjvantoll/pen/jekiu

위의 문제에 대한 JavaScript 솔루션을 개발했습니다
FF에서만 테스트 한 것처럼 Firefox 7+에서만 작동합니다.

나는이 실에 와서 마이클 코퍼

이 솔루션에서는 세 가지 중요한 일이 이루어집니다
1) 열 너비를 고정하십시오
2) thead> tr 디스플레이가 블록으로 설정되었습니다.
3) TBody 디스플레이가 차단되도록 설정되었습니다

다른 사람들이 너비를 고치는 데 문제가 있다고 언급했듯이, 나는 또한 같은 위치에 있습니다.
너비를 정적으로 고칠 수 없다

그래서 나는 너비를 동적으로 고정시킬 것이라고 생각했고 (테이블이 브라우저에서 렌더링 된 후) 이것은 트릭을했다 :)

다음은 FF에서만 작동하는 JavaScript의 솔루션입니다.
(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";  
        }

이 솔루션은 브라우저에서 열의 너비가 얼마인지 알아냅니다.
그리고 다시 열과 같은 너비를 다시 설정합니다 (헤더 및 첫 번째 줄)
너비가 설정된 후; thead> tr 및 tbody 디스플레이가 블록으로 설정되었습니다.

이 솔루션이 여러분 모두에게 유용하기를 바랍니다 ..
다른 브라우저로 확장 할 수 있다면이 게시물에 회신하십시오.

이것은 정말로 꽤 해킹되지만 아마도 어딘가에 누군가를 도울 것입니다 ...

http://jsfiddle.net/yuhcq/1/

행 대신 열을 사용하므로 처리하면 본질적으로 뒤로 처리됩니다.

IE 호환성을 위해 과도기 DocType가 추가되었습니다.

이 질문에는 과잉 일 수 있지만 Yui는 여전히 최고의 무료 크로스 브라우저 데이터 가능성을 제공합니다. 읽기 전용 데이터에도 사용할 수 있습니다.

Yui 2 데이터 가능

Yui 3 데이터 가능

스크롤 가능한 샘플을 보려면 예제를 클릭하십시오. 나는 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 Quirks 모드에서 작동 해야하는 사람이라면 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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top