web-dev-qa-db-fra.com

Comment faire défiler le tableau html verticalement

voir jsbin

Je dois faire défiler mon tableau html verticalement.
J'ai utilisé le code ci-dessous sur la balise tbody mais sa ne fonctionne pas

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

Pourquoi ne placez-vous pas votre table dans une div?

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

 ... Your code goes here ...

</div>
82
sushil

Il suffit d’ajouter l’affichage: block to the thead> tr and tbody. vérifier l'exemple ci-dessous

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

16
Viralk

Essayez celui-ci .. Il fonctionne ... Ici JSBIN

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

La meilleure façon de le faire est de séparer strictement votre table en deux tables différentes - en-tête et corps:

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

Si votre table a une grande largeur (plus que la largeur de l'écran), vous devez ajouter des événements de défilement pour l'en-tête et le corps du défilement horizontal en synchronisme.

Vous ne devez jamais toucher les balises de table (table, tbody, thead, tfoot, tr) avec les propriétés CSS display et overflow . Traiter avec des wrappers DIV est beaucoup plus préférable.

4
odiszapc

Le plugin jQuery est probablement la meilleure option. http://farinspace.com/jquery-scrollable-table-plugin/

Pour fixer l'en-tête, vous pouvez vérifier ce post 

Fixation de l'en-tête de GridView ou de HtmlTable (il est possible que cela ne fonctionne que dans IE uniquement)

CSS pour fixer l'en-tête 

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>

ou

Très bon post est là pour ça 

Comment geler les colonnes à l'aide de JavaScript et HTML.

ou

Non, ce n'est pas possible, mais vous pouvez utiliser div et mettre tableau dans div 

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

Salut essayer avec ce débordement-y: faites défiler. J'espère que ça peut vous aider

2
muthu

Voici ma solution (au printemps avec Thymeleaf et 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

Ceci est un travail autour.

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

[MODIFIER]

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

Je me suis battu avec celui-ci pendant un moment. Mon objectif était d’avoir un tableau avec des en-têtes où les largeurs de chaque colonne d’en-tête étaient identiques à celles de la colonne de corps correspondante et constituaient la taille minimale nécessaire pour l’ajustement des données. De plus, les données du corps défilaient sous l'en-tête.

J'ai résolu ce problème en utilisant des divs et non des tables. Chaque "table" était un div dont l'en-tête était un div de divs et le corps était un div de divs. J'ai utilisé le style indiqué par @sushil ci-dessus. J'ai ajouté un peu de javascript/jQuery pour équilibrer les colonnes. Peut-être 20-30 lignes.

Malheureusement, j'ai perdu le code et je dois le reconstruire. Je sais que c'est un peu vieux, mais peut-être que cela aidera quelqu'un d'autre.

0
AixNPanes