Quel style pour un <td> ?

Version imprimable

30/07/2008, 10h54
SweetLeaf

Quel style pour un <td> ?

Rebonjour !! (ça faisait longtemps !!)

Je vient de parcourir quelques forum et je vient de voir que le fait de mettre ça :

Code:

BaliseLigne2.style.display = "none";

ça faisait bugger parce que cette methode n'est pas faite pour les td mais pour les div...

J'ai essayer aussi visibility :

Code:

BaliseLigne2.visibility = false;

ou

Code:

BaliseLigne2.style.visibility="hide";

mais ca bugg et je ne suis pas sur du code...

Si quelqu'un pouvais m'indiquer le nom de la méthode que je doit employé ca serait super !! Merci d'avance !!

Bonjour avec dans la balise td:

Code:

style="visibility: hidden;"

Pour ton cas:

Code:

BaliseLigne2.style.visibility = "hidden";

Pour compléter, voici un code avec le tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

IE7 => pas d'affichage de la couleur du "tr" pour la cellule cachée.
FF3 => affichage de la couleur du "tr" sur la cellule cachée

Et valide XHTML 1.0 Strict
A+

30/07/2008, 12h00
SweetLeaf

je vais manger je te dit quoi vers 14h !!
Merci
30/07/2008, 12h02
Invité

Bon déjeuné :)

Citation:

Envoyé par SweetLeaf

Rebonjour !! (ça faisait longtemps !!)

Je vient de parcourir quelques forum et je vient de voir que le fait de mettre ça :

Code:

BaliseLigne2.style.display = "none";

ça faisait bugger parce que cette methode n'est pas faite pour les td mais pour les div...

Tu es sûr que le sujet ne portait pas plutôt sur l'affichage ou le masquage d'une ligne (tr) ?

Le style.display="none" fonctionne pour toutes les balises.

Cette propriété appliquée sur une ligne (tr):

Code:

BaliseLigne2.style.display = "block";

ne fonctionne pas effectivement.
Mais

Code:

BaliseLigne2.style.display = "none";

ne pose aucun souci (sur un tr).

Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <table id="tab" border="1"> <tr> <td>ligne 1 </td> </tr> <tr> <td>ligne 2 </td> </tr> <tr> <td>ligne 3 </td> </tr> </table> <input type="button" value="Cache" id="BNom" onclick="CacheLigne()"> <input type="button" value="Montre" id="BNom" onclick="MontreLigne()"> </body> </html>

Bonjour,

Attention, sous FF3 l'utilisation de "display: none;" cache bien la cellule mais crée un décalage que fait aussi IE7.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="display: none;">cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

Et c'est toujours valide XHTML 1.0 Strict

A+

30/07/2008, 14h13
SweetLeaf

En fait le souci n'est pas vraiment sur le masquage ou non de la ligne car ça marche très bien... mais parce que ça fait bugger mon colspan que j'ai défini juste au dessus...

Si je ne masque pas ma ligne le colspan se fait si je la masque le colspan ne se fait pas et je ne comprend pas pourquoi...
30/07/2008, 14h31
SweetLeaf

J'ai pas trouvé de solution je vais essayé d'affecté le colspan après avoir fait apparaitre la ligne.
Je vous tient au courant !!

Re

et avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
<style type="text/css">
/* <![CDATA[ */
table, tr, td {
 border-collapse: collapse;
}
 
/* ]]> */
</style>
<script type="text/javascript">
function show_tr() {
  document.getElementById('tr').style.display = (document.getElementById('tr').style.display == "none")? "" :"none";
}
</script>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''" onclick="show_tr()">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td style="visibility: hidden;">cell</td>
    <td>cell</td>
  </tr>
  <tr id="tr" style="display: none" onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

CSS:

Code:

1
2
3
table, tr, td {
 border-collapse: collapse;
}

Ok?

A+

30/07/2008, 14h54
SweetLeaf

C'est tout bonnement impeccable !! :king:
Merci à tous !!