Je voudrais avoir une table avec une barre de défilement à droite.
Je veux accomplir ceci sans aucun plugin (jQuery) juste avec css.
L'en-tête de table est censé rester fixe.
Que dois-je faire pour que cela fonctionne?
Réponses
Trop de publicités?
Vous avez pris une tâche qui, si vous réussissez, va faire de vous un héros. J'ai essayé et à la simplicité de la chose, à la position:fixed; le <thead> -- est impossible. J'ai dû copier tous les <thead> dans un nouvel objet. Mais quand vous le faites, l'espacement horizontal des éléments <th> va tout de suite si les titres ne sont pas alignées avec les <td>s plus. J'ai fini par faire quelque chose comme ceci:
Tout d'abord, abandonner ie6 et ie7. Il n'y a pas d'espoir pour ces gars-là.
Faire deux copies de la table, où le corps est invisible et le <thead> est visible, et l'autre où il est vice-versa.
Donner des z-index:1; à la table avec le visible <thead>.
Donner des z-index:0; à la table avec le visible <tbody>.
Traiter avec le défilement horizontal, mais pas jusqu'à ce que vous trouver que onScroll n'est pas une ie8 événement (pour ne pas mentionner ie6), de sorte que vous avez à prendre d'un setInterval briser chaque dixième de seconde seulement de gérer le défilement de l' <thead> à gauche et à droite dans ie8.
Cela vous donnera un corps de table de l'infini défilement dans les deux axes, avec une tête de table qui permet de faire défiler dans l'axe x uniquement. Réussit plutôt bien dans FF, Chrome et Safari. Mais est fragile dans ie8. Un vrai pain pita.
Bonne chance, et merci de nous écrire si vous obtenez ce à travail!
Mikhail
Points
5123
Seuls les navigateurs Firefox et IE6-7 prennent en charge le défilement intégré <tbody> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
einterview
Points
119
Voici la solution,
L'en-tête fixe de la table et le contenu à l'intérieur de la table peuvent être déroulés.
Partie HTML
<div class="table_wrapper">
<div class="header">
<div class="head1">Left</div>
<div class="head2">Center</div>
<div class="head3">Right Column</div>
</div>
<div class="tbody">
<table>
<tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
<tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
<tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
</tbody></table>
</div>
</div>
Partie CSS
.table_wrapper {background:tomato;border:1px double olive;float:left;}
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
.td3{border-right-width:0;}
.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
.header div{padding:1px 5px;float:left;border-right:1px solid orange;}
.header .head3{float:none;border-right-width:0;}
.head3 span{padding-left:5px;}
.td1{width:100px;}
.td2{width:140px;}
.header .head1{width:100px;}
.header .head2{width:140px;}
Adam Nicholson
Points
141
Ce simple CSS devrait faire l'affaire:
table.table-scroll-body {
position: relative;
height: 200px; }
table.table-scroll-body tbody {
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto; }
Et le HTML si vous en avez besoin ..
<table class="table-scroll-body">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
</tbody>
PiZzL3
Points
1058
Cela fonctionne, il a pris tout mon site web:
#news_box {
overflow: scroll;
overflow-x: hidden;
}
EDIT:
J'ai aussi découvert tout cela avec un exemple:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Voici un autre bon article sur elle:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
