web-dev-qa-db-de.com

Wie man eine HTML-Tabelle vertikal scrollbar macht

siehe jsbin

Ich muss meine HTML-Tabelle vertikal scrollbar machen.
Ich habe untenstehenden Code für tbody-Tag verwendet, aber er funktioniert nicht für mich

 <tbody style="height: 100px; overflow: auto">
48
Nikhil D

Warum platzieren Sie Ihren Tisch nicht in einem Div?

<div style="height:100px;overflow:auto;">

 ... Your code goes here ...

</div>
82
sushil

Fügen Sie einfach die Anzeige: Block auf den Kopf und den Körper. Überprüfen Sie das Beispiel unten

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

16
Viralk

Versuchen Sie es hier .. es funktioniert ... hier JSBIN

table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }
9
naim shaikh

Am besten trennen Sie Ihre Tabelle strikt in zwei verschiedene Tabellen - Header und Body:

<div class="header">
  <table><tr><!-- th here --></tr></table>
</div>

<div class="body">
  <table><tr><!-- td here --></tr></table>
</div>

.body {
  height: 100px;
  overflow: auto
}

Wenn Ihre Tabelle eine große Breite hat (mehr als die Bildschirmbreite), müssen Sie Bildlaufereignisse für den horizontalen Bildlaufkopf und -körper synchron hinzufügen.

Sie sollten niemals Table-Tags (table, tbody, thead, tfoot, tr) mit den CSS-Eigenschaften display und overflow berühren. Der Umgang mit DIV-Wrappern ist viel vorzuziehen.

4
odiszapc

Das jQuery-Plugin ist wahrscheinlich die beste Option. http://farinspace.com/jquery-scrollable-table-plugin/

Um den Header zu korrigieren, können Sie diesen Beitrag überprüfen 

Fixing Header von GridView oder HtmlTable (Möglicherweise gibt es ein Problem, dass dies nur in IE funktionieren sollte).

CSS zum Fixieren des Headers 

div#gridPanel 
{
   width:900px;
   overflow:scroll;
   position:relative;
}


div#gridPanel th
{  
   top: expression(document.getElementById("gridPanel").scrollTop-2);
   left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
   position: relative;
   z-index: 20;
  }

<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px">
table..
</div>

oder

Dafür ist ein sehr guter Beitrag da 

So frieren Sie Spalten mit JavaScript und HTML ein.

oder

Nein, das ist nicht möglich, aber Sie können div verwenden und die Tabelle in div setzen 

<div style="height: 100px; overflow: auto">
  <table style="height: 500px;">
   ...
  </table>
</div>
3
Pranay Rana

Hi versuch mal mit diesem Überlauf-y: scrollen. Ich hoffe es kann dir helfen

2
muthu

Hier ist meine Lösung (im Frühling mit Thymeleaf und jQuery):

html:

<!DOCTYPE html>
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:tiles="http://www.thymeleaf.org">
    <body>
        <div id="objects" th:fragment="ObjectList">
            <br/>
            <div id='cap'>
                <span>Objects</span>
            </div>
            <div id="hdr">
                <div>
                    <div class="Cell">Name</div>
                        <div class="Cell">Type</div>
                </div>
            </div>
            <div id="bdy">
                <div th:each="object : ${objectlist}">
                        <div class="Cell" th:text="${object.name}">name</div>
                        <div class="Cell" th:text="${object.type}">type</div>
                </div>
            </div>
        </div>
    </body>
</html> 

css:

@CHARSET "UTF-8";
#cap span {
    display: table-caption;
    border:2px solid;
    font-size: 200%;
    padding: 3px;
}
#hdr {
    display:block;
    padding:0px;
    margin-left:0;
    border:2px solid;
}
#bdy {
    display:block;
    padding:0px;
    margin-left:0;
    border:2px solid;
}
#objects #bdy {
    height:300px;
    overflow-y: auto;
}
#hdr div div{
    margin-left:-3px;
    margin-right:-3px;
    text-align: right;
}
#hdr div:first-child {
    text-align: left;
}
#bdy div div {
    margin-left:-3px;
    margin-right:-3px;
    text-align: right;
}
#bdy div div:first-child {
    text-align: left;
}
.Cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}

javascript:

$(document).ready(function(){
    var divs = ['#objects'];
    divs.forEach(function(div)
    {
        if ($(div).length > 0)
        {
            var widths = [];
            var totalWidth = 0;
            $(div+' #hdr div div').each(function() {
                widths.Push($(this).width())
            });
            $(div+' #bdy div div').each(function() {
                var col = $(this).index();
                if ( $(this).width() > widths[col] )
                {
                    widths[col] = $(this).width();
                }
            });
            $(div+' #hdr div div').each(function() {
                var newWidth = widths[$(this).index()]+5;
                $(this).css("width", newWidth);
                totalWidth += $(this).outerWidth();
            });
            $(div+' #bdy div div').each(function() {
                $(this).css("width", widths[$(this).index()]+5);
            });
            $(div+' #hdr').css("width", totalWidth);
            $(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0));
        }
    })
});
2
AixNPanes

Dies ist eine Umgehung.

http://jsfiddle.net/JJV59/2/

[BEARBEITEN]

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<table cellspacing="1" width="100%" bgcolor="#cccccc">
    <thead>
        <tr>
            <td bgcolor="#ffffff" width="70px">
            </td>
            <td class="csstablelisttd" width="70px">
                <b>Time Slot&nbsp;</b>
            </td>
            <td class="csstablelisttd">
                <b>&nbsp;Patient Name</b>
            </td>
        </tr>
    </thead>
</table>
<!-- THIS GIVES THE SCROLLER -->
<div style="height: 500px; overflow-y: auto">
    <table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc">
         <tbody>
            <tr>
                <td class="csstablelisttd" valign="top" width="70px">
                    8:00AM
                </td>
                <td class="csstablelisttd" width="70px">
                    0
                </td>
                <td class="csstablelisttd">
                    <span>Name 1</span>
                </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        9:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        10:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        11:00AM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        12:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        01:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        02:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        03:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        04:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        05:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        06:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        07:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        15
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        30
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd">
                    </td>
                    <td class="csstablelisttd">
                        45
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="csstablelisttd" valign="top" width="90px">
                        08:00PM
                    </td>
                    <td class="csstablelisttd">
                        0
                    </td>
                    <td class="csstablelisttd">
                        <span></span>
                    </td>
                </tr>
            </tbody>
        </table>    
    </div>

</body>
</html>
1
Rishabh

Ich habe eine Weile mit diesem gekämpft. Mein Ziel war es, eine Tabelle mit Kopfzeilen zu haben, bei der die Breite jeder Kopfspalte der entsprechenden Textspalte entsprach und die Mindestgröße war, um die Daten anzupassen. Auch die Body-Daten waren unter dem Header scrollbar.

Ich löste dies durch die Verwendung von divs und nicht von Tabellen. Jede "Tabelle" war ein Div, wobei die Kopfzeile ein Div von Divs und der Körper ein Div von Divs war. Ich habe den Stil wie oben bei @sushil angegeben verwendet. Ich habe ein bisschen Javascript/jQuery hinzugefügt, um die Spalten auszubalancieren. Vielleicht 20-30 Zeilen.

Leider habe ich den Code verloren und muss ihn neu erstellen. Ich weiß, das ist ein bisschen alt, aber vielleicht hilft es jemand anderem.

0
AixNPanes