J'ai besoin d'une solution simple. Je sais que c'est similaire à d'autres questions, comme :
Mais j'ai besoin qu'une seule colonne de gauche soit gelée et je préférerais une solution simple et sans script.
Si vous voulez un tableau où seules les colonnes défilent horizontalement, vous pouvez position: absolute la première colonne (et spécifier sa largeur explicitement), puis envelopper l'ensemble du tableau dans une balise overflow-x: scroll bloc. Ne vous embêtez pas à essayer ceci dans IE7, cependant...
HTML et CSS pertinents :
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table>
</div>
Notez qu'il est très difficile d'obtenir des bordures correctes (c'est-à-dire des pixels parfaitement alignés) ; en pratique, si vous voulez vraiment des bordures, je les placerais sous le niveau du td (en incluant tout le contenu du td dans un div, par exemple).
Cela ne gère pas les étiquettes arbitraires. À moins que vous n'ayez des étiquettes très courtes et prévisibles, vous obtiendrez ceci : jsfiddle.net/YMvk9/3724
@AaronLS : oui, vous devez spécifier la largeur de la première colonne. Si vous avez besoin de traiter des étiquettes de longueur arbitraire, vous pouvez utiliser text-overflow: ellipsis pour les afficher proprement.
Ce site est un plugin jQuery intéressant qui permet de créer des en-têtes et/ou colonnes . Activez la colonne fixe sur la page de démonstration pour la voir en action.
@Fortega : C'est également pour les colonnes, si vous définissez la propriété fixedColumn : true. Il existe une démo que vous pouvez consulter.
Ah ok, ce n'était pas clair. La démo ne fonctionnait pas la semaine dernière. Mais elle l'est maintenant.
En cas de colonne de gauche de largeur fixe, la meilleure solution est fournie par Eamon Nerbonne .
Dans le cas d'une colonne de gauche de largeur variable, la meilleure solution que j'ai trouvée est de faire deux tableaux identiques et de les pousser l'un au-dessus de l'autre. Démonstration : http://jsfiddle.net/xG5QH/6/ .
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
+10 très astucieux. J'ai dû mettre border-collapse à seperate sous bootstap, sinon les bordures ne flottent pas avec les cellules. Un peu de nettoyage des bordures est nécessaire après cela.
Très bien ! Merci ! Je n'ai pas utilisé <th> pour mes propres raisons, j'ai utilisé une classe pour indiquer quelle colonne devait être fixée, et, pour faire bonne mesure, j'ai ajouté un visibility: collapse; aux colonnes à masquer de la table fixe (il faut aimer l' :not() css selector !). J'ai également utilisé jQuery pour .clone() le tableau, une fois qu'il a été généré par php+MySQL+ajax, et l'insérer dans un div nettoyé...
C'est brillant dans sa simplicité. Est-il possible de permettre un défilement vertical correct de la page entière ?
Oui, vous devriez sauter la partie "table" et utiliser simplement deux divs, un pour la colonne de gauche et un pour le reste du contenu. La colonne de gauche reçoit position: fixed et reste en place, le reste du contenu se comporte normalement (vraisemblablement avec une marge gauche définie pour qu'il ne chevauche pas la colonne de gauche).
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.
1 votes
Une très bonne mise en œuvre (à mon avis) est postée ici : stackoverflow.com/a/57524791
1 votes
Pour les lignes multiples gelées avec des colonnes multiples gelées, voir stackoverflow.com/questions/53332830