28173 sujets

CSS et mise en forme, CSS3

[Résolu] Un tbody avec un scrollbar

Bonjour,

j'aimerai savoir s'il est possible d'avoir un scrollbar sur un tbody (et uniquement sur lui) qui permettrait de lire l'ensemble d'un tableau tout en ayant toujours sous les yeux le thead.

C'est peut être l'heure tardive mais je n'y arrive pas ...

voici un test tout simple :

<html>
<body>
<table>
	<thead>
		<tr>
		<th>Colonne 1</th>
		<th>Colonne 2</th>
		<th>Colonne 3</th>
		<th>Colonne 4</th>
		</tr>
	</thead>
	<tbody style="height: 50px;overflow:auto;">
		<tr>
		<td>valeur 1</td>
		<td>valeur 2</td>
		<td>valeur 3</td>
		<td>valeur 4</td>
		</tr>
		<tr>
		<td>valeur A</td>
		<td>valeur B</td>
		<td>valeur C</td>
		<td>valeur D</td>
		</tr>
		<tr>
		<td>valeur 5</td>
		<td>valeur 6</td>
		<td>valeur 7</td>
		<td>valeur 8</td>
		</tr>
		<tr>
		<td>valeur ...</td>
		<td>valeur ...</td>
		<td>valeur ...</td>
		<td>valeur ...</td>
		</tr>
	</tbody>
</table>
</body>
</head>


Le principe du srollbar est là ... mais il reste invisible Smiley bawling

si quelqu'un à une soluce je suis preneur
Modifié par Francois44 (01 Feb 2007 - 18:31)
Salut.

A ma connaissance, ce n'est pas possible.
tu peux encadrer ton tableau par un div, et mettre le overflow sur le div.
Il faut juste penser à définir les entetes du tableau non pas dans le tableau lui meme mais au dessus du div, afin de les voir en permanence (meme lors d'un scroll).
Bon, si c'est pas possible ... ça explique que je n'y arrive pas Smiley smile


Par contre je ne suis pas convaincu par ta solution avec le div. En effet, cela veut dire que l'entête du tableau n'est pas lié (au niveau de la structure) avec le corps du tableau. Je suis pas certain que cela soit très accessible ...
Je vien de tester ton exemple MrPatate, effectivement, ça ne marche que sur Firefox:

Netscape et Opera ignore le css.
IE fait un truc bizarre (hauteur de ligne)
Firefox: ça marche

J'ai réalisé le même test avec l'exemple que j'ai fait dans mon premier post:

Netscape: ça marche
IE et Opera ignore le css.
Firefox: ça marche sauf que le sroll n'est pas visible (c'est embêtant tout de même)


Du coup, je me dis que c'est peut être réalisable ... en bidouillant un peu ...

Une question me vient: est-ce que c'est faisable en JavaScript?
Merci pour cette infos Eldebaran Smiley smile

Je vien de tester vite fait, ça marche sur Opera, Netscape et firefox. Par contre ça ne marche pas (et pire encore, le contenu du tableau n'est pas accessible) avec IE7 ...

Je vais regarder plus en détail le code ... peut être que je peux l'améliorer Smiley smile
Après quelques test un peu plus poussé, je m'aperçois que ça marche sur IE7 lorsque je ne met pas de doctype. (dans ce cas, ça ne marche plus sur Opera)

par contre, lorsque je met

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

ça ne marche plus sur IE7 mais ça fonctionne sur opera

Smiley eek
Francois44 a écrit :
Après quelques test un peu plus poussé, je m'aperçois que ça marche sur IE7 lorsque je ne met pas de doctype. (dans ce cas, ça ne marche plus sur Opera)
J'ai vu qu'il y avait des hacks dans le code CSS, il faudrait les transformer en commentaires conditionnels, et certains doivent sans doute viser aussi IE 7.
Sujet clos
Aller à