Y a-t-il une technique CSS/JavaScript multi-navigateur pour afficher une longue table HTML, tels que les en-têtes de colonnes restent fixes à l’écran et ne défilent pas avec le corps de la table. Pensez à l’effet de « figer les volets » dans Microsoft Excel.
Je veux être en mesure de faire défiler le contenu de la table, mais d’être toujours en mesure de voir les en-têtes de colonne en haut.
Je cherchais une solution pour ce pour un certain temps et a trouvé la plupart des réponses ne sont pas de travail ou ne convient pas pour ma situation, j'ai donc rédigé une solution simple avec jquery.
c'est la solution de contour.
ci-dessous est le code. voici la démo en-Tête Fixe Démo
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script>
function scrolify(tblAsJQueryObject, height){
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow','scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function(){
scrolify($('#tblNeedsScrolling'), 160); // 160 is height
});
</script>
</head>
<body>
<div style="width:300px;border:6px green solid;">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
<tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>
<tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
<tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
<tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
<tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
</tbody>
</table>
</div>
</body>
cette solution fonctionne dans chrome & ie. depuis ceci est basé sur jquery, cela devrait fonctionner dans d'autres jquery navigateurs pris en charge.
Je viens de terminer de mettre ensemble un plugin jQuery qui va prendre valide seule table à l'aide d'un code HTML valide (avoir un thead et tbody) et en sortie un tableau qui a résolu les en-têtes, fixe en option pied de page qui peut être soit un clone de l'en-tête ou de tout contenu que vous avez choisi (la pagination, etc.). Si vous souhaitez profiter d'un grand écran, il sera également modifier la taille de la table lorsque le navigateur est redimensionnée. Une autre caractéristique ajoutée est d'être capable de défilement côté si les colonnes de la table ne peut pas tenir dans la vue.
sur github: http://markmalek.github.com/Fixed-Header-Table/
Il est extrêmement facile d'installation et vous pouvez créer vos propres styles personnalisés. Il utilise également des coins arrondis dans tous les navigateurs. Gardez à l'esprit que je viens juste de sortir, donc il est toujours techniquement bêta et il y a très peu de problèmes mineurs, je suis de repassage.
Il fonctionne dans Internet Explorer 7, Internet Explorer 8, Safari, Firefox et Chrome.
Toutes les tentatives pour résoudre ce à partir de l'extérieur de la CSS sont des ombres pâles de ce que nous voulons vraiment: Livraison sur la promesse implicite de THEAD.
Cette gelée-headers-pour-une-table numéro a été une plaie ouverte dans le HTML/CSS pour un long moment.
Dans un monde idéal, il serait une pure css solution pour ce problème. Malheureusement, il ne semble pas être une bonne idée en place.
Normes pertinentes-les discussions sur ce sujet, notamment:
Si vous ciblez les navigateurs modernes et n'ont pas extravagant besoins: http://jsfiddle.net/dPixie/byB9d/3/ ... Bien que les quatre grands de la version est assez doux aussi cette version gère fluide largeur beaucoup mieux.
Avec les avancées de HTML5 et CSS3 c'est désormais possible, au moins pour les navigateurs modernes. Légèrement hackish mise en œuvre, je suis venu avec peut être trouvé ici: http://jsfiddle.net/dPixie/byB9d/3/. Je l'ai testé dans FX 25, Chrome 31 et IE 10 ...
HTML concernés (insérer un doctype HTML5 en haut de votre document tout de même):
<section class="positioned">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
Avec ce CSS:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
Pour faire simple vous avez un tableau d'en-tête, que vous visuellement cacher en le rendant 0px haut, qui contient également les divs utilisé comme en-tête fixe. La table du conteneur laisse assez de place en haut pour permettre le positionnement absolu de l'en-tête, et le tableau avec les barres de défilement apparaissent comme vous le souhaitez.
Le code ci-dessus utilise la placé de classe à la position de la table absolument (je l'utilise dans une fenêtre de dialogue style) mais vous pouvez l'utiliser dans le flux du document, par la suppression de l' positioned de la classe à partir du conteneur.
Il n'est pas parfait. Firefox refuse de faire la ligne d'en-tête 0px (au moins je n'ai pas trouver de toute façon), mais obstinément le garde au minimum 4px ... C'est pas un énorme problème, mais en fonction de votre style qu'il mess avec vos frontières, etc.
La table est également à l'aide d'une fausse colonne approche où la couleur d'arrière-plan du conteneur lui-même est utilisé comme arrière-plan de l'en-tête de la vrd, qui sont transparents.
Dans l'ensemble il peut être le style de questions en fonction de vos exigences, en particulier des frontières ou des complexes de milieux. Il peut également y avoir des problèmes avec la compilation, je n'ai pas vérifié dans une grande variété de navigateurs encore (s'il vous plaît commentaire avec vos expériences si vous l'essayer), mais je n'ai pas trouver quelque chose comme ça donc j'ai pensé qu'il valait la peine de poster de toute façon ...
Voici un plugin jQuery pour être fixé à la table d'en-tête. Il permet à l'ensemble de la page pour faire défiler, le gel de l'en-tête lorsqu'il atteint le sommet. Il fonctionne parfaitement avec twitter bootstrap tables.
Live exemple: http://rubynor.com/table-fixed-header/example.html
Dépôt Github: https://github.com/oma/table-fixed-header
Il ne fait pas défiler uniquement du contenu de la table. Se tourner vers d'autres outils, comme l'un de ces autres réponses. Vous décidez ce qui correspond à votre cas le mieux.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
