Challenge : Table (Overflow-Y + position aboslute)

Bonjour à tous,

Après m'être cassé la tête , je ne vois d'autres choix que de partager mon problème

Je vous explique, je dois faire un table avec un thead, un tbody, et un tfoot qui contient les actions que je peux réalisé sur mon table (classique) sauf que...

Dans mon tBody, il peut il y avoir des plusieurs dizaines de lignes et je n'ai pas énormément de place donc je dois faire un tbody scrollable.

Pour ce faire j'ai utilisé un table dans un div lui même contenu dans un autre table

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
	</thead>
	<tbody>
		<tr>
			<td colspan="2">
				<div>
					<table>
						<tbody>	
							<tr>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Jusque là, ça va... Sauf que... Au survol d'une ligne, j'aimerais afficher une mini fonctionnalité pas très important donc masquée par défaut mais utile (un lien détail). Je l'affiche au survol du tr en le positionnant négativement.

Bref, j'arrive à faire, ou un ou l'autre, mais ce n'est pas compatible ensemble...

J'ai fais une petite page de démo pour mieux comprendre : Page de démo

Quelqu'un aurait-il une super idée ?

Merci d'avance,

Yordi
Modifié par Yordi (12 Nov 2012 - 11:56)

C'est dégoutant, mais d'après ce que je compris, c'est ce que tu cherches à faire : http://jsfiddle.net/Rfdtm/1/
Modifié par HammHetfield (12 Nov 2012 - 16:40)

C'est exactement ça que je recherche... merci !

Je pense que l'opacité n'est peut-être la bonne méthode (pour les utilisateurs qui sélectionnent toujours toute la page). Donc pourquoi pas un display none du contenu de la cellule "invisible".


Si quelqu'un a une idée un poil plus propre ?! Ou une amélioration ?

Autre 'détail'...
si votre idée pouvait être compatible IE7, ça serait top