Fixe-tête du tableau avec la barre de défilement horizontale et verticale de la barre de défilement sur

J'ai été à essayer de comprendre ce problème que j'ai avec le html/css collant en-tête + barres de défilement. Nous créons un programme qui nécessite des barres de défilement pour afficher une fois la containersize atteint un certain point(en fonction de la résolution de l'utilisateur).

Je suis forcer un min-width sur la deuxième colonne de la table, de sorte que le tableau s'arrête à la baisse à un certain point, et les forces de l'conteneur de rester à une certaine largeur. Le débordement sur le conteneur affiche la barre de défilement horizontale. Tout fonctionne très bien. Une fois que j'ajoute une deuxième barre de défilement pour le défilement vertical, les choses sont plus foiré. Quelqu'un a une solution pour ce problème? Je veux avoir une barre de défilement verticale sur le .table-corps, mais la barre de défilement doit être visible sur le outercontainer.

Est-il un bon html/css solution pour l'en-tête fixe les tables? J'ai été à la recherche pour une semaine, mais ne peut trouver les plugins jQuery pour ce genre de comportement.

C'est mon HTML:

<!DOCTYPE html>
<html>
<head>
<title>fixed header prototyping</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">
<div class="table-header">
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="header-cell col1">One</th>
<th class="header-cell col2">Two</th>
<th class="header-cell col3">Three</th>
<th class="header-cell col4">Four</th>
<th class="header-cell col5">Five</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Et mon CSS ressemble à ceci:

body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;
}
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: scroll;
overflow-y:hidden;
}
.table-header {
float:left;
width: 100%;
}
.table-body {
float:left;
height: 100%;
width: inherit;
overflow-y: scroll;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width:120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}

JSFiddle exemple - http://jsfiddle.net/W8URM/

Merci d'avance les gars!

avez-vous d'utiliser un table? ou pouvez-vous utiliser un tableau comme div de mise en page?
Veuillez vérifier si la solution s'intègre parfaitement.

InformationsquelleAutor Remco Bakker | 2013-02-20

68

Ce n'est pas facile.
Je suis venu avec un Script de solution. (Je ne pense pas que cela peut être fait en utilisant uniquement CSS)

la HTML reste la même que vous avez posté, le CSS change un peu, JQuery code ajouté.

Travail Violon Testé sur: IE10, IE9, IE8, FF, Chrome

BTW: si vous avez des éléments uniques, pourquoi n'utilisez-vous pas de l'id au lieu de classes?
Je pense que ça donne un meilleur sélecteur de performance.

Explication de la façon dont il fonctionne:
inner-container s'étendra à l'ensemble de l'espace de la outer-container (donc, fondamentalement, il n'est pas nécessaire), mais je l'ai laissé là-bas, donc vous n'aurez pas besoin de vous changer les DOM.

la table-header est en position relative, sans défilement (overflow: hidden), nous nous occupons de son défilement plus tard.

la table-body ont étendre sur le reste de la inner-container hauteur, j'ai donc utilisé un script pour déterminer quelle hauteur fixer lui. (il change de façon dynamique lorsque vous redimensionnez la fenêtre)
sans une hauteur fixe, le défilement de la coutume semble, parce que la div ne feront que croître grande place..
notez que cette partie peut être fait sans script, si vous corrigez l'en-tête de la hauteur et de l'utilisation de CSS3 (comme le montre la fin de la réponse)

maintenant, c'est juste une question de déplacement de l'en-tête avec le corps à chaque fois que nous les faire défiler.
cela est réalisé par une fonction attribuée à la scroll événement.

CSS (certaines ont été copiés à partir de votre style)
```
*
{
padding: 0;
margin: 0;
}
body
{
height: 100%;
width: 100%;
}
table
{
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
.outer-container
{
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom: 40px;
}
.inner-container
{
height: 100%;
overflow: hidden;
}
.table-header
{
position: relative;
}
.table-body
{
overflow: auto;
}
.header-cell
{
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell 
{
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5
{
width:120px;
min-width: 120px;
}
.col2
{
min-width: 300px;
}
```
JQuery
```
$(document).ready(function () {
setTableBody();
$(window).resize(setTableBody);
$(".table-body").scroll(function ()
{
$(".table-header").offset({ left: -1*this.scrollLeft });
});
});
function setTableBody()
{
$(".table-body").height($(".inner-container").height() - $(".table-header").height());
}
```
Si vous ne vous inquiétez pas à propos de la fixation de l'en-tête de la hauteur (j'ai vu que tu fixe la cellule de la hauteur dans votre CSS), un peu de Script peut être skiped si vous utilisez CSS3 :plus Courte Violon (cela ne fonctionne pas sur IE8)
- Upvoted! Je partage votre avis que cela ne peut pas être réalisé en pur CSS. À mon humble avis, votre solution est exactement ce qui est demandé. Le balisage original n'est déjà pas très sémantiquement, parce que le fractionnement d'une table thead et tbody, plus enveloppant chacun dans une DIV n'a pas l'air "correct" pour moi.
- Je suis d'accord avec vous.
- J'ai même mettre en œuvre dans ma page, il y a une question qui me tracasse cependant: Comment gérez-vous la page de rtl direction, scrollLeft n'est plus applicable?
- sans mettre beaucoup de pensée en elle, je dirais que vous pouvez remplacer left: -1*this.scrollLeft par right: -1*this.scrollRight. post pertinent de violon, et nous allons continuer à partir de là.
- scrollRight n'est pas une valeur que je peux obtenir à partir de javascript natif violon est ici lien sur la base de votre violon
- Pourquoi votre Tested on: IE10, IE9, IE8, FF, Chrome violon solution ne fonctionne pas sur ie8 tout en utilisant jquery-1.7.2 pouvez-vous s'il vous plaît dites-moi
- Pour IE, je l'ai testé sur ma machine locale.
- Cette solution impose une largeur de colonne fixe. Qui emporte l'un des éléments de la table caractéristiques les plus utiles.
- Solution sympa. Cela devrait toutefois être modifié en CSS3 transformer pour utiliser l'accélération matérielle au lieu de repeindre avec chaque rouleau. jsfiddle.net/eZXtq/665
- J'ai fait une version simplifiée sans intérieur & extérieur des conteneurs pour mes propres besoins. Si quelqu'un d'autre en a besoin: jsfiddle.net/7Lgoaos7
- votre démonstration ne fonctionne pas bien. le titre se cache le premier contenu en ligne, et nous pouvons voir à travers la rubrique lorsque nous défiler, et la partie inférieure de défilement n'est visible que lorsque nous faites défiler vers le bas.
- vous êtes correct. Je n'ai pas le polonais la démo complètement, car il est déjà adapté à mes besoins. Ici est la version polie, si quelqu'un en a besoin: jsfiddle.net/kq1gzzmm. Bas de défilement dépend de la hauteur du conteneur et le titre est en position relative, afin de ne pas cacher d'abord le contenu de la ligne.
- vous vous demandez si vous pouvez aider avec ma version de la question : stackoverflow.com/questions/47073223/...
InformationsquelleAutor avrahamcool
51

Voici une solution qui est encore pas un CSS seule solution. Il est semblable à avrahamcool's solution en ce qu'il utilise quelques lignes de jQuery, mais au lieu de changer de hauteurs et de déplacement de la tête le long, il n'est de changer la largeur de tbody basé sur la façon dont la mesure de son parent table défile le long de la droite.

Un bonus supplémentaire avec cette solution, c'est qu'il fonctionne avec un sémantiquement valide tableau HTML.

Il fonctionne très bien sur toutes les récentes versions de navigateur (IE10, Chrome, FF) et c'est elle, la fonctionnalité de défilement des pauses sur les anciennes versions.

Mais alors le fait que vous utilisez un point de vue sémantique HTML valide table sauvera le jour et de s'assurer de la table est toujours affichée correctement, il est seulement la fonctionnalité de défilement qui ne fonctionnent pas sur les anciens navigateurs.

Voici un jsFiddle pour les besoins de la démonstration.

CSS
```
table {
width: 300px;
overflow-x: scroll;
display: block;
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td, th {
min-width: 100px;
}
```
JS
```
$("table").on("scroll", function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
```
J'avais besoin d'une version qui se dégrade bien dans IE9 (pas de défilement, juste une table normale). Affichage du violon ici que c'est une version améliorée. Tout ce que vous devez faire est de définir une hauteur sur le tr.

Supplémentaires CSS pour rendre cette solution se dégrader bien dans IE9
```
tr {
height: 25px; /* This could be any value, it just needs to be set. */ 
}
```
Voici un jsFiddle démontrer le bien dégradants dans IE9 version de cette solution.

Modifier: mise à Jour de tripoter les liens pour accéder à une version du violon qui contient des correctifs pour les problèmes mentionnés dans les commentaires. Juste l'ajout d'un extrait avec la dernière et meilleure version pendant que j'y suis:

JS:
```
$('table').on('scroll', function() {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
```
CSS:
```
html {
font-family: verdana;
font-size: 10pt;
line-height: 25px;
}
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
}
thead,
tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td,
th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
</tbody>
</table>
```
- Très simple et très bonne solution :), mais si vous avez besoin d'utiliser deux tables ou plus sur la même page, vous pouvez mettre en œuvre le code suivant: $(window).load(function(){ $('table').on('scroll', function () { $(this).find(" > *").width($(this).width() + $(this).scrollLeft()); }); }); Merci beaucoup Mathijs pour l'idée.
- Je veux si mal pour que cela fonctionne parfaitement, malheureusement, si vous cliquez sur la molette de défilement pour faire de déplacement de la souris, le défilement dans IE 10 & 11 il ne le défilement horizontal sur le corps et non de la tête, et n'a même pas de mise à jour de la barre de défilement. Toutes les idées sur la façon de le réparer?
- Même solution, mais sans superflu CSS (pet peave lors de la démonstration d'un CSS solution) jsfiddle.net/oozL98dx
- Cela fonctionne assez bien jusqu'à ce que votre contenu est > à 100px de large. Ensuite, la TH de la largeur de ne pas correspondre aux TD largeur.
- Vous devriez vérifier l'original de violon dans la réponse, le problème que vous mentionnez ne montre que dans la version sans les "étrangers" de CSS. Il semble un peu trop de CSS a été supprimé dans la version..
- href="http://jsfiddle.net/X2Kmd/388/" >Que le violon ne fonctionne toujours pas si le contenu est > à 100px de large (sans saut de ligne).
- Ah, je vois, que pouvait être résolu de cette façon. Je me rends compte que cela corrige les colonnes de largeurs, mais depuis je n'ai jamais de venir avec une solution qui prend en charge flexible des largeurs de colonne en fonction de leur contenu, je ne pense pas que c'est un problème. Je suis une sorte de moi-même coups de pied pour ne pas faire cela en premier lieu, donc merci pour ça 🙂
- vous vous demandez si vous pouvez aider avec ma version de la question : stackoverflow.com/questions/47073223/... voulez-vous savoir ce que je suis absent?
- quelqu'un peut-il aider avec ma version de question:stackoverflow.com/questions/51578325/...
InformationsquelleAutor Mathijs Flietstra
12

Voici un code HTML /CSS seule solution (avec un peu de javascript).

Excuses pour répondre à la question après cette longue, mais la solution ne me convenait pas et j'ai trouvé mieux. Ici est la façon la plus simple de le faire avec le HTML (pas de jquery):

Avant que, la solution de violon à la question. https://jsfiddle.net/3vzrunkt/
```
<div>
<div style="overflow:hidden;;margin-right:16px" id="headerdiv">
<table id="headertable" style="min-width:900px" border=1>
<thead>
<tr>
<th style="width:120px;min-width:120px;">One</th>
<th style="width:420px;min-width:420px;">Two</th>
<th style="width:120px;min-width:120px;">Three</th>
<th style="width:120px;min-width:120px;">Four</th>
<th style="width:120px;min-width:120px;">Five</th>
</tr>
</thead>
</table>
</div>
<div style="overflow-y:scroll;max-height:200px;" 
onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;">
<table id="bodytable" border=1 style="min-width:900px; border:1px solid">
<tbody>
<tr>
<td style="width:120px;min-width:120px;">body row1</td>
<td style="width:420px;min-width:420px;">body row2</td>
<td style="width:120px;min-width:120px;">body row2</td>
<td style="width:120px;min-width:120px;">body row2</td>
<td style="width:120px;min-width:120px;">body row2 en nog meer</td>
</tr>
:
:
:
:
</tbody>
</table>
</div>
</div>
```
Et pour expliquer la solution:
1. vous avez besoin et en joignant div aucun débordement/défilement nécessaire
2. un en-tête div contenant l'en-tête de la table avec overflow:hidden pour s'assurer que la barre de défilement ne s'affiche pas. Ajouter margin-right:16px pour s'assurer que la barre de défilement est laissé à l'extérieur pendant la synchronisation.
3. un autre div contenant les enregistrements de la table et overflow-y:scroll. Remarque le rembourrage est nécessaire pour obtenir la barre de défilement vers la droite de l'en-tête.
4. Et la chose la plus importante magique js pour synchroniser l'en-tête et les données de la table:
```
 onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;"
```
- Bonne idée, même si j'aimerais une alternative à l'aide d'un tableau en tant que tel
- Est-il possible de prolonger votre solution (sans jQuery) pour fixer la colonne (la dernière ou la première)? J'ai essayé de mettre en position: absolute, mais alors c'est unscrollable..
- Cheers mate comme css seule solution, cela fonctionne comme un charme.
- vous vous demandez si vous pouvez aider avec ma version de la question : stackoverflow.com/questions/47073223/... ? merci.
- J'ai essayé cela, mais mon en-tête n'est pas de défilement horizontal. Aucune idée pourquoi? S'il vous plaît aider.
- B. - pouvez-vous créer un violon et de la partager pour que je puisse vérifier ce qui est mal.
- Bonjour @Anshuman, j'étais en fait de l'intégrer dans un système à l'aide d'un cadre avec des CSS. C'est pourquoi je pense que ça ne fonctionnait pas. Beaucoup de raisons qui se passait. Je n'ai plus besoin de toute façon. Merci pour la réponse.
- Ce n'est pas un code HTML/CSS seule solution, vous disposez d'un onscroll qui est en JavaScript.
- convenu et modifier qui a été fait. Merci pour la sortir
InformationsquelleAutor Anshuman

exemple de travail en jsFiddle

Ceci peut être réalisé à l'aide de div. Il peut être fait avec table aussi. Mais je préfère toujours div.

<body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()"> 
<div>
<!--If you don't need header background color you don't need this div.-->
<div id="div-header-hack" style="height: 20px; position: absolute; background-color: gray"></div>
<div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray">                
</div>
<div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()">                
</div>
</div>
</body>

Javascript:

veuillez vous référer jsFiddle pour cette partie. Le reste de cette réponse devient très long.

vous pouvez ajouter vos propres styles de cellules de la grille et de lignes.

InformationsquelleAutor user10

3

Cela a été me rend fou pour quelques semaines. J'ai trouvé une solution qui fonctionne pour moi qui comprend:
1. Non-fixe les largeurs de colonne - ils réduire et croître sur le redimensionnement de la fenêtre.
2. Table a l'horizontale de la barre de défilement lorsque cela est nécessaire, mais pas quand il ne l'est pas.
3. Nombre de colonnes n'est pas pertinente - il de la taille par le nombre de colonnes que vous en avez besoin pour.
4. Pas toutes les colonnes doivent être de la même largeur.
5. En-tête va tout le chemin à la fin de la barre de défilement à droite.
6. Pas de javascript!
...mais il ya un couple de mises en garde:
1. La barre de défilement verticale n'est pas visible jusqu'à ce que vous faites défiler tout le chemin vers la droite. Étant donné que la plupart des gens ont des molettes de défilement, ce fut un sacrifice acceptable.
2. La largeur de la barre de défilement doit être connue. Sur mon site, j'ai mis la barre de défilement largeurs (je ne suis pas trop préoccupé par les plus âgés, de l'incompatibilité des navigateurs), donc, je peux alors calculer div et table largeurs régler à partir de la barre de défilement.
Au lieu de poster mon code ici, je vais poster un lien vers la jsFiddle.

En-tête fixe de table + touche de défilement gauche/droite.

InformationsquelleAutor elPastor

vous pouvez utiliser le code CSS suivant..

body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;
}
.outer-container {
background-color: #ccc;    
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow:hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
}
.table-header {
float:left;
width: 100%;
}
.table-body {
float:left;
height: 100%;
width: inherit;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width:120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}

InformationsquelleAutor Arun

1

La solution est d'utiliser JS pour défiler horizontalement en haut de la div, de sorte qu'il corresponde au bas de la div.

Vous devez être très prudent assurez-vous que le haut et le bas sont exactement les mêmes dimensions, par exemple, vous pourriez avoir besoin de faire de la banque TD et TH utiliser des largeurs fixes.

Ici est un violon https://jsfiddle.net/jdhenckel/yzjhk08h/5/

Les parties importantes: CSS utilisation
```
.head {
overflow-x: hidden;
overflow-y: scroll;
width: 500px;
}
.lower {
overflow-x: auto;
overflow-y: scroll;
width: 500px;
height: 400px;
}
```
Avis overflow-y doit être le même sur les deux tête et le bas.

Et le Javascript...
```
var head = document.querySelector('.head');
var lower = document.querySelector('.lower');
lower.addEventListener('scroll', function (e) {
console.log(lower.scrollLeft);
head.scrollLeft = lower.scrollLeft;
});
```
InformationsquelleAutor John Henckel

Vous devez vous connecter pour publier un commentaire.