icone de suppression d'une colonne

**danytro** · 30/10/2012, 23h15

Bonjour, pourriez-vous m'indiquer comment je peux faire en sorte qu'une icône s'affiche dans le coin supérieur droit d'une cellule quelque soit le contenu de la cellule et que ce contenu soit positionné comme si l'icone n'existait pas.
Je pensait utiliser z-index mais ça ne marche pas du tout.
Voilà le code.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HTML>
<BODY>
	<TABLE style='text-align:center' border=1>
		<TR>
			<TH>
				<A style='position:relative; z-index:1; top:0;right:0' href=#>
					<IMG src='../img/ico/suppr.png'/>
				</A>
				<A style='position:relative; display: inline-block; text-align:center; vertical-align:middle;' href=#>
					titre<BR>colonne1
				</A>
			</TH>
		</TR>
	</TABLE>
</BODY>
</HTML>

**danytro** · 31/10/2012, 09h24

Voilà, j'ai finalement trouvé une solution qui me convienne, pour ceux qui souhaiteraient en profiter:
-les titres dans les entetes de colonne sont centrés horizontalment par rapport à la largeur totale de la cellule. Ils sont tous alignés verticalement vers le bas.
-L'icone qui permet de supprimer la colonne est dans le coin supérieur droit de l'entete de colonne.
-Cela fonctionne pour un tableau comprenant des entetes de colonne comprenant 2 mots séparés d'un retour à la ligne.
les chiffre 24, 16 et -4 sont a adapter suivant la situation.
n.b: 24 + 16 = hauteur d'une entete de colonne comprenant un retour à la ligne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<HTML>
<HEAD>
<style>
.icone { float:right; }
.titre1lig, .titre2lig { display: block; clear:left; padding: 0 10px 0 10px;}
.titre1lig { position:relative; height:24px; bottom:-4; padding-top:16px; }
</style>
</HEAD>
<BODY>
	<TABLE border=1 style='text-align:center; '>
		<TR>
			<TH></TH>
			<TH>
				<A class=icone href=#><IMG src='../img/ico/suppr.png'/></A>
				<A class=titre2lig href=#>titre<BR>colonne1</A>
			</TH>
			<TH><A class=icone href=#><IMG src='../img/ico/suppr.png'/></A>
				<A class=titre1lig href=#>titre</A>
			</TH>
		</TR>
		<TR><TD>mon nom</TD><TD>essai1</TD><TD>essai2</TD></TR>
	</TABLE>
</BODY>
</HTML>

icone de suppression d'une colonne

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager