css et balise tr

Version imprimable

css et balise tr

Bonjour,

mon code html est :

Code:

1
2
3
4
5
<table id="table_1">
<tr class="tr_1"><td>a</td></tr>
<tr class="tr_1"><td>b</td></tr>
<tr class="tr_1"><td>c</td></tr>
</table>

le code css correspondant est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
table#table_1
{
 border-left-style:solid;
border-left-color:#FF0000;
border-left-width:1px;
} 
 
table#table_1 .tr_1
{
 border-left-style:solid;
border-left-color:#FF0000;
border-left-width:1px;
}

Aucun affichage de trait côté gauche ???

Pourquoi?

Merci

31/03/2009, 17h04
HiRoN

Salut,

Et en faisant :

Code:

#table_1 tr { border-left:1px solid #FF0000; }

(donc plus besoin de class sur le tr)
?

Un petit tour sur les cours et tutoriels CSS en particulier ici serait sûrement utile...
31/03/2009, 18h08
Erwan31
Pas besoin de le déclarer à la fois sur les tr et le table.
Code:

1 2 3 4 5 <table id="table_1"> <tr><td>a</td></tr> <tr><td>b</td></tr> <tr><td>c</td></tr> </table>
Code:

#table_1 {border-left : 1px solid #F00;}

En principe ça devrait fonctionner comme ça donc il vaudrait mieux que tu donnes la totalité des code ou que tu donnes une page en ligne.

le code html s'execute via le template smarty :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{* si le choix de la présentation réduite est sélectionné *}
{elseif $choix_apparence_articles eq 1}
<form name="form_articles_1" method="post" action="index.php?num_hierarchie=?">
<table id="table_art_1">
	{if $titre_table_articles_1 eq 1}
	<thead  id="thead_art_1">
		<tr>
		{if $art1col_num eq 1}
			<td>{$smarty.const.NUMERO}</td>
		{/if}
		{if $art1col_photo eq 1}
			<td>{$smarty.const.PHOTO}</td>
		{/if}
		{if $art1col_nom_p eq 1}
			<td>{$smarty.const.NOM}</td>
		{/if}
		{if $art1col_description eq 1}
			<td>{$smarty.const.DESCRIPTION}</td>
		{/if}
		{if $art1col_marque eq 1}
			<td>{$smarty.const.MARQUE}</td>
		{/if}
		{if $art1col_prix_vente eq 1}
			<td>{$smarty.const.PRIX_VENTE}</td>
		{/if}
		</tr>
	</thead>
	{/if}
	<tfoot>
		<tr><td colspan=3>{html_image file="../design/images/fleche_selection_articles.png"}</td><td colspan=2><label onclick="alert('e');">{$smarty.const.ARTICLES_SELECTION_VISIBLE}</label></td></tr>
	</tfoot>	
	<tbody>
	{foreach from=$liste_articles key=k item=v}
		<tr class="tr_art_1">
			{if $art1col_num eq 1}
				<td style="text-align:center;">{html_checkboxes name="select_art_1" values=$v[0] output=""}</td>
			{/if}
			{if $art1col_photo eq 1}
				<td style="text-align:center;">{html_image_mini file_photo="../photo_produit/$v[4]" nom_classe="img_art_reduite"}</td>
			{/if}
		{if $art1col_nom_p eq 1}
			<td style="text-align:center;">{$v[1]}</td>
		{/if}
		{if $art1col_description eq 1}
			<td style="text-align:left;">{BBCode citation=$v[2]}</td>
		{/if}
		{if $art1col_marque eq 1}
			<td style="text-align:center;">{$v[5]}</td>
		{/if}
		{if $art1col_prix_vente eq 1}
			<td style="text-align:center;">{Tarif tarif=$v[3] precision=2}</td>
		{/if}
			<td>Ajouter au panier</td>
		</tr>
	{/foreach}
	</tbody>
</table>
</form>

le code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table#table_art_1
{
	width:100%;
}
 
table#table_art_1 thead#thead_art_1
{
	background-color:#FFFF00;
	border-left-style:solid;
	border-left-color:red;
	border-left-width:1px;
	text-align:center;
}
 
table#table_art_1 .tr_art_1
{
	background-color:#FF0000;
	border:1px solid green;
}

Malheureusement, je n'ai ni trait vert, ni trait rouge !!!!

31/03/2009, 21h57
GihefBey

Bonjour,

À l'origine, (x)HTML n'a pas prévu qu'on mette des bordures aux <tr>.
Chez moi, Safari, Firefox ou Opera refusent de les afficher.

-
31/03/2009, 22h03
bastien

Donc je ne peux encadrer une ligne complète !?

soit la balise table soit la balise td est-ce cela?

supposons que je souhaite séparer par un trait horizontal la ligne des intitulés des lignes des réultats, comment faire? Il existe bien une solution, non?
31/03/2009, 22h05
GihefBey

C'est bien ça.

-
31/03/2009, 22h06
bastien

supposons que je souhaite séparer par un trait horizontal la ligne des intitulés des lignes des réultats, comment faire? Il existe bien une solution, non?
31/03/2009, 22h07
bastien

Citation:

Envoyé par GihefBey

Bonjour,

À l'origine, (x)HTML n'a pas prévu qu'on mette des bordures aux <tr>.

-

comment le sais-tu? quel site consultes-tu?
31/03/2009, 22h25
GihefBey
Citation:

Envoyé par bastien

supposons que je souhaite séparer par un trait horizontal la ligne des intitulés des lignes des réultats, comment faire? Il existe bien une solution, non?

Essaye
Code:

1 2 3 #thead_art_1 tr td { border-bottom : 1px solid #f00; }
ou avec une image
Code:

1 2 3 #thead_art_1 tr { background : url(1x1.png) repeat-x left bottom; }
Citation:

Envoyé par bastien

comment le sais-tu? quel site consultes-tu?

Le W3C ou developpez.com.

-
31/03/2009, 22h57
Erwan31

Citation:

Envoyé par GihefBey

À l'origine, (x)HTML n'a pas prévu qu'on mette des bordures aux <tr>.
Chez moi, Safari, Firefox ou Opera refusent de les afficher.

L'attribut border peut-être mais pas la propriété CSS border. :roll:

@bastien Essaye en ajoutant border-collapse:collapse au table ;)
01/04/2009, 08h24
bastien

En effet, l'attribut collapse ... :?

merci