Machen Sie TBODY in Webkit-Browsern scrollbar

Ich bin mir dieser Frage bewusst , aber keine der Antworten funktioniert in Safari, Chrome usw.

Die akzeptierte Strategie ( wie hier gezeigt ) besteht darin, die Körperhöhe und die Überlaufeigenschaften wie folgt einzustellen:

<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 dies in keinem Webkit-Browser. Es gibt einen Fehlerbericht darüber, der keine hohe Priorität zu haben scheint (berichtet am 5. Juni).

Meine Frage ist also: Gibt es alternative Strategien, die tatsächlich funktionieren? Ich habe den Zwei-Tabellen-Ansatz ausprobiert, aber es ist unmöglich zu garantieren, dass der Header mit dem Inhalt übereinstimmt. Muss ich nur warten, bis das Webkit das Problem behoben hat?

Hier ist ein Arbeitsbeispiel:

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

Sie müssen den display: block zum thead> tr und tbody hinzufügen

Verwenden des Blockstils display: funktioniert nur, wenn Sie eine Spalte haben. Wenn Sie mehrere Datenspalten haben - mit mehreren Feldern -, wird angezeigt: Der Block scheint alle Datenspalten scrollbar zu machen, jedoch unter der ersten Spalte (macht dasselbe in Firefox - dem einzigen mir bekannten Browser, der gut scrollen kann). In Firefox können Sie übrigens den Stil overflow-x: hidden verwenden, um den horizontalen Bildlauf zu unterdrücken.

Ich habe festgestellt, dass das erwähnte Problem nur auftritt, wenn Sie keine Breite für die th & td-Elemente angeben. Wenn Sie die Spaltenbreiten korrigieren können, funktioniert es. Das Problem für mich ist, dass ich die Spaltenbreiten nicht korrigieren kann.

Versuchen Sie die erste Methode dieser Seite, reines CSS mit einer einzelnen Tabelle (2 Divs um die Tabelle, und der Kopf ist absolut positioniert): http://www.cssplay.co.uk/menu/tablescroll.html Scheint zu arbeiten FF4 / IE9 / IE8 zusätzlich zu IE7 / FF3.6.

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

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

Ich habe Sean Haddys hervorragende Lösung gesehen und mir die Freiheit genommen , einige Änderungen vorzunehmen :

• Verwenden Sie Klassen anstelle von ID, sodass ein jQuery-Skript für mehrere Tabellen auf einer Seite wiederverwendet werden kann
• Unterstützung für semantische HTML-Tabellenelemente wie caption, thead, tfoot und tbody hinzugefügt
• Die Bildlaufleiste wurde optional gemacht, sodass sie nicht für Tabellen angezeigt wird, die "kürzer" als die scrollbare Höhe sind
• Die Breite des Bildlauf-Divs wurde angepasst, um die Bildlaufleiste an den rechten Rand der Tabelle zu bringen
• Konzept zugänglich gemacht durch
  • Verwenden von aria-hidden = "true" für den injizierten statischen Tabellenheader
  • und den ursprünglichen Kopf an Ort und Stelle belassen, nur mit jQuery versteckt und gesetzt aria-hidden="false"
• Beispiele für mehrere Tabellen mit unterschiedlichen Größen

Sean machte das schwere Heben. Vielen Dank auch an Matt Burland für den Hinweis, dass der Fuß unterstützt werden muss.

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

A hatte vor langer Zeit das gleiche Problem, und ich habe schließlich den Ansatz mit zwei Tabellen dargelegt. Dies ist das Ergebnis: http://jsfiddle.net/bGr4V/3/ , es funktioniert für alle Browser (IE6 + inkl.).

In dieser jsFiddle können Sie mit einer sauberen Version spielen.

Meine Lösung war eine hinzuzufügen fix Zelle <th class="fix"> </th> in theadfüllen den Raum der Bildlaufleiste in der tbody, dann gibt einer Spalte eine variable Breite ( <td class="grow">), so dass der Kopf fix Zelle würde 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: has *und _hack für ie6-7 und jeweils eine -webkitfür die Header - Fixzelle passende Bildlaufbreite .

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

Ich dachte, ich würde meine Lösung in den Mix werfen - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .

Es nimmt den gleichen grundlegenden Weg wie die Lösung von @Michael Koper, enthält jedoch eine Problemumgehung, damit die Tabelle im IE wieder korrekt zu IE6 aussieht.

Ich löse das Breitenproblem, indem ich den Zellen in jeder Spalte das <table>a gebe table-layout: fixedund ihnen explizit die Breite zuweise. Nicht ideal, aber es wird eine semantische Tabelle erstellt, die browserübergreifend ausgerichtet wird, unabhängig davon, ob eine Bildlaufleiste benötigt wird.

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

Ich habe eine Javascript-Lösung für das oben genannte Problem entwickelt,
die nur in Firefox 7+ funktioniert, da ich nur in FF getestet habe.

Ich bin zu diesem Thread gekommen und habe eine Lösung gefunden, auf die Michael Koper hingewiesen hat

In dieser Lösung werden drei wichtige Dinge erledigt:
1)
Festlegen der Spaltenbreite 2) Die Anzeige des Kopfes> tr ist auf Block eingestellt.
3) Die Anzeige des Körpers ist auf Block eingestellt

Wie andere erwähnt haben, gibt es auch Probleme, die Breite zu korrigieren. Ich bin auch in derselben Position.
Selbst ich kann die Breite nicht statisch fixieren

Also dachte ich, ich werde die Breite dynamisch korrigieren (nachdem die Tabelle im Browser gerendert wurde) und das hat den Trick gemacht :)

Das Folgende ist die Lösung in Javascript, die nur in FF funktioniert
(ich habe nur in FF getestet, ich habe keinen Zugriff auf andere Browser)

       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ösung ermittelt die Breite der Spalte im Browser
und setzt erneut die gleiche Breite für die Spalten (Kopfzeile und erste Zeile von tbody).
nachdem die Breite festgelegt wurde. Die Anzeige von head> tr und tbody ist auf Block eingestellt

Ich hoffe, diese Lösung ist für Sie alle nützlich.
Wenn Sie sie auf andere Browser ausweiten können, antworten Sie bitte auf diesen Beitrag

Das ist wirklich ziemlich hackig, aber vielleicht hilft es jemandem irgendwo ...

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

Es werden Spalten anstelle von Zeilen verwendet, sodass die Verarbeitung im Wesentlichen rückwärts erfolgt.

Übergangs-DOCTYPE aus Gründen der IE-Kompatibilität hinzugefügt.

Es mag für diese Frage übertrieben sein, aber YUI bietet möglicherweise immer noch die beste kostenlose browserübergreifende Datierung. Es kann auch für schreibgeschützte Daten verwendet werden.

YUI 2 DataTable

YUI 3 DataTable

Klicken Sie dort auf die Beispiele, um scrollbare Beispiele anzuzeigen. Da ich ein Neuling im Stackoverflow bin, kann ich nur diese beiden Links posten.

Hinzufügen display:block;Dadurch wird auch der unnötige horizontale Bildlauf in FireFox entfernt. Sie wissen zweifellos auch, dass keines der beiden Beispiele in MSIE 8 funktioniert.

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

Hier gibt es ein Beispiel, das in IE5 +, Firefox und Chrome funktioniert. Es werden jedoch Spalten mit fester Breite verwendet. http://www.cssplay.co.uk/menu/tablescroll.html

Wenn jemand es benötigt, um im IE-Mackenmodus zu arbeiten, habe ich den Code von IG Pascual folgendermaßen geändert und vereinfacht:

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

Lassen Sie die Tabelle so zeichnen, wie sie ist, berechnen Sie die Breite jeder Spalte und setzen Sie sie in jede Überschrift. Überschriften werden mit Unterteilungen erstellt, und dann können wir die Tabelle frei scrollen lassen.

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