Machen TBODY scrollbaren in Webkit-Browsern

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich bin mir dessen bewusst? diese Frage , aber keine der Antworten arbeiten in Safari, Chrome, etc.

Die akzeptierte Strategie ( wie hier gezeigt) ist die tbody Höhe und Überlaufeigenschaften wie so eingestellt werden: 

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

Leider funktioniert das nicht in irgendwelchen Webkit-Browsern. Es ist ein Bugreport rel="nofollow darüber das scheint nicht ein hoch zu sein Priorität (Ergebnisse im Juni 05).

Also meine Frage ist: Gibt es alternative Strategien, die tatsächlich funktionieren? Ich habe den zwei-Tabelle Ansatz versucht, aber es ist unmöglich zu garantieren, dass der Header mit dem Inhalt in eine Reihe aufstellen wird. Muss ich nur für Webkit warten, um es zu beheben?

War es hilfreich?

Lösung

Hier ist ein funktionierendes Beispiel:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Sie haben die Anzeige hinzuzufügen: Block zum thead> tr und tbody

Andere Tipps

Mit der Anzeige: Block-Stil funktioniert nur, wenn Sie 1 Spalte haben. mit mehreren Feldern - - Wenn Sie mehrere Datenspalten haben dann Anzeige: Block erscheint alle Datenspalten scrollbaren aber unter der ersten Säule zu machen (macht das gleiche in Firefox - was der einzige Browser ist weiß ich, dass tbody schön nicht scrollen). . Im übrigen auf Firefox - können Sie den Überlauf-x verwenden: hidden Stil den horizontalen Bildlauf zu unterdrücken

wurde mir klar, dass das Problem, das ich nur erwähnen, tritt auf, wenn Sie nicht eine Breite für die th & td Elemente angeben - wenn Sie die Spaltenbreiten dann beheben kann es funktioniert. Problem für mich ist, kann ich die Spaltenbreiten nicht beheben.

Versuchen Sie das erste Verfahren dieser Seite, reine CSS mit einer einzigen Tabelle (2 divs um den Tisch, und die thead ist positionned absolut): http://www.cssplay.co.uk/menu/tablescroll.html Scheint auf FF4 / IE9 / IE8 zusätzlich zu arbeiten, um IE7 / FF3.6.

Ich hatte das gleiche Problem und schrieb einen jQuery-Skript das für mich zu tun ... verwendet zwei Tabellenelemente und formatiert entsprechend die CSS. Hoffe, das hilft anderen, die das gleiche Problem haben ...

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

ich sah Sean Haddy ausgezeichnete Lösung und nahm die Freiheit von einige Änderungen machen :

  • Verwenden Sie Klassen statt ID, so ein jQuery-Skript für wiederverwendet werden könnte mehrere Tabellen auf einer Seite
  • Unterstützung für semantische HTML Tabellenelemente wie Titel, thead, tfoot und tbody
  • Made Scrollbar optional, so dass es nicht für die Tabellen angezeigt, die „kürzer“ als die scrollbaren Höhe
  • Bereinigtes div Breite Scrollen der Scrollbar zu bringen bis zum rechten Rand der Tabelle
  • Made Konzept zugänglich
    • mit Arie versteckt = „true“ auf injiziert statischen Tabellenkopf
    • und original Thead vor Ort belassen, nur mit jQuery versteckt und setzt aria-hidden="false"
  • Zeigte Beispiele für mehrere Tabellen mit verschiedenen Größen

Sean tat das Heben schwerer Lasten, though. Dank Matt Burland Auch für Notwendigkeit tfoot unterstützen Hinweis.

Bitte überzeugen Sie sich selbst unter http://jsfiddle.net/jhfrench/eNP2N/

A vor dem gleichen Problem vor langer Zeit, und ich endlich die beiden Tabellen Ansatz dargelegt. Dies ist das Ergebnis: http://jsfiddle.net/bGr4V/3/ , es funktioniert für alle Browser (IE6 +) inkl.

dieser jsFiddle mit einem sauberen Version spielen können.

Meine Lösung eine fix Zelle <th class="fix"> </th> in thead hinzuzufügen war den Raum der Bildlaufleiste in der tbody zu füllen, dann gibt einer Spalte eine variable Breite (<td class="grow">), so dass die Header-Datei reparieren Zelle nicht uNMATCH auf Größe ändern.

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: hat * und _ für ie6-7 hacken und ein -webkit spezifisch für den Header fix-Zelle passende Scroll Breite jeweils

. 
.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 }
}

Dachte, ich meine Lösung in die Mischung werfen würde - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .

Es nimmt den gleichen grundlegenden Weg wie @ Michael Koper-Lösung enthält aber eine Abhilfe, so dass die Tabelle zurück zu IE6 im IE korrekt aussehen wird.

löse ich die Breite Problem, das von <table> eine table-layout: fixed geben und ausdrücklich Breite an Zellen in jeder Spalte zuweisen. Nicht ideal, aber es hat eine semantische Tabelle zu erzeugen, die Cross-Browser ausrichten wird, unabhängig davon, ob eine Scrollbar benötigt wird.

Demo: http://codepen.io/tjvantoll/pen/JEKIu

Ich entwickeln JavaScript-Lösung für das oben beschriebene Problem
das funktioniert nur in Firefox 7+, wie ich nur in FF
getestet
Ich kam zu diesem Thema und fand Lösung weist nach Michael Koper

Bei dieser Lösung drei wichtige Dinge getan
1) fixieren die Spaltenbreite
2) thead> tr Anzeige wird
blockieren 3) tbody Anzeige wird
blockieren

, wie andere es ein Problem erwähnt haben, die Breite zu beheben, ich bin auch in derselben Position;
selbst kann nicht fix i die Breite statisch

, also dachte ich, dass ich die Breite dynamisch fixieren (nach Tabelle wird im Browser gerendert) und dies hat den Trick:)

Folgende ist die Lösung in Javascript, die nur in FF
funktioniert (Ich habe nur in FF getestet, nicht i Zugang zu anderen Browsern) 

       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";  
        }

Diese Lösungen finden heraus, was die Breite der Spalte von Browser
ist und stellt wieder die gleiche Breite auf Spalten (Header und erste Zeile des Tbody)
nachdem die Breite eingestellt ist; thead> tr und tbody Anzeige wird blockieren

Hoffen, dass diese Lösung für alle von Ihnen nützlich ist ..
wenn Sie es zu anderen Browsern erweitern können Sie auf diesen Beitrag antworten

Das ist wirklich ganz hacky aber vielleicht wird es jemand irgendwo helfen ...

http://jsfiddle.net/yUHCq/1/

Es verwendet Spalten anstelle von Zeilen so verarbeiten sie im wesentlichen nach hinten durchgeführt werden würden.

Transitional DOCTYPE hinzugefügt für IE-Kompatibilität.

Es kann viel des Guten für diese Frage, aber YUI bietet noch vielleicht die beste kostenlose Cross-Browser-Datentabelle. Es kann auch für Nur-Lese-Daten verwendet werden.

YUI 2 Datatable

YUI 3 Datatable

Klicken Sie auf die Beispiele dort scrollbaren Proben zu sehen. Da ich ein Neuling bin zu Stackoverflow, kann ich nur diese beiden Links posten.

In display:block; Dies wird auch den unnötigen horizontalen Bildlauf in FireFox und entfernen. Sie sind auch ohne Zweifel bewusst, dass weder Beispiel funktioniert in 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>

Es gibt hier ein Beispiel, das in IE5 +, Firefox und Chrome funktioniert. Jedoch verwendet es feste Breite Spalt. http://www.cssplay.co.uk/menu/tablescroll.html

Wenn jemand braucht es in IE zu arbeiten Quirks-Modus, hier ist wie ich mich verändert und vereinfacht I. G. Pascual Code zu arbeiten: 

.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>

den Tisch Unentschieden Lassen wie es Weg, und jede Spaltenbreite berechnen und setzen Sie sich auf jede Rubrik. Überschriften sind mit Abteilungen gemacht und dann können wir die Tabelle lassen gescrollt frei werden. 

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top