28220 sujets

CSS et mise en forme, CSS3

Survol ligne tableau

Pages :
(reprise du message précédent)

Sinon, on peut revenir à mon sujet ?!?

Je rapel le but, c d'encadrer toute la ligne d'un tableau en la survolant, et non encadrer toutes les cellules de cette ligne grace à Javascript, nuance!
Je commence à me demander si c possible.

Allez, encore un effort!
On a bien dit avec javascript?

La balise <TR > n'est pas encadrable.

Je propose une solution en construisant un tableau à l'aide de DIV et de SPAN:

<html>
<head>
<style>

</style>

<script>
function highLight() 
{
n = window.event.srcElement; // L'élément qui a déclenché l'événement
p = n.parentElement; // Son parent
if (n.tagName == 'SPAN') // si c'est un SPAN
	{
		p.style.borderColor="black";
		p.style.borderWidth="1";
		p.style.borderStyle="solid";
	}
}

function lowLight() 
{
n = window.event.srcElement;
p = n.parentElement;
if (n.tagName == 'SPAN')
	{
		p.style.border = "0";
	}
}

// Interception des évennements
document.onmouseover = highLight;
document.onmouseout = lowLight;

</script>
	
</head>
<body>


<div id="table">
<div>
<span>cellule</span><span>cellule</span><span>cellule</span><span>cellule</span>
</div>
<div>
<span>cellule</span><span>cellule</span><span>cellule</span><span>cellule</span>
</div>
<div>
<span>cellule</span><span>cellule</span><span>cellule</span><span>cellule</span>
</div>

</body>
</html>


Ne marche évidement pas sous FireFox. Smiley fou
Modifié par GeorgesM (09 Sep 2005 - 16:17)
Oui, c'est sur c'est une solution, mais bon ça contourne un peu le problème et c'est pas très propre !

Je pense que finalement c pas possible!
Bonjour,

Je me suis déjà penché sur ce genre de problème. Désolé, mais ce n'est pas possible simplement.
En CSS, tu n'as accès qu'à la cellule pour les *bordures* (ou plutôt, tu n'y as pas accès depuis une tr).
En gros ce genre de truc ne marchera pas :

/*-- CSS --*/
tr{
  border:1px solid red;
  }


il faut donc considérer chaque cellule et notamment la plus à gauche et la plus à droite. Donc en gros, avoir ceci :


/* -- le CSS -- */
td {
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-left:none;
  border-right:none;

td.left{
  border-left:1px solid red;
  }

td.right{
  border-right:1px solid red;
  }


<!-- html -->
<table>
  <tr>
    <td class="left>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td class="right">...</td>
  </tr>
</table>


Je n'ai pas testé, mais ça me semble le plus propre.

Sinon, tu as tout de même accès à ce genre de choses :

/* CSS */
tr {
  cursor:pointer;
  background:red;
}


Et évidemment, tous ces habillages, tu les modifies à l'aide d'un petit bout de JS bien senti (ça sert à ça...)

En esperant avoir apporté qq idées...
Pages :
Sujet clos
Aller à