Bonjour,
Dans les cellules d'un tableau, je peux avoir plusieurs éléments que je mets en ligne. J'aimerais rajouter en face, dans une seconde colonne, du texte qui doit être aligné avec un des éléments de la 1ère colonne.
Mon code :Le visuel obtenu :
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
26
27
28
29
30
31
32
33
34
35
36
37
38 <style>.bout {border: 1px solid #00b3cd;width:30px;height:30px;text-align:center;float:left;margin-right:5px;border-radius:10px;background-color:#CEF6F5;}.bout:hover {background-color:#2E64FE}.corx {display:none;border: 1px solid #00b3cd;clear:both;max-width:630px;}.td1 {text-align:center;font-family:arial;font-size:1.2em;font-weight:bold;border: 1px solid black;line-height:1.2;}.td2 {border: 1px solid black;font-size:1.2em;text-align:center;line-height:1.5em;}.td3 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;}.td4 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;font-weight:bold;}</style> <center> </div> <table> <tbody> <tr> <td colspan="2" class="td1" style="width:530px;background-color:#CEF6F5;">Poule A-1</td> </tr> <tr> <td class="td2" style="width:50%;color:blue;font-weight:bold;">Club</td> <td class="td2" style="width:50%;color:blue;font-weight:bold;">Nom équipe</td> </tr> <tr> <td class="td3"> Club A Club B Club C Club D </td> <td class="td3"> Les joyeux drilles les joyeux lurons </td> </tr> </tbody> </table>
Alors que j'aimerais que "les joyeux drilles" soit sur la 1ère ligne (en face du club A) et "les joyeux lurons" en face de club C
Existe-t-il une solution autre que celle qui consiste à enchainer les <tr> et <td> sachant que souvent la 2ème colonne est vide (comme dans le code ci-dessous) et que j'ai beaucoup de lignes ?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 <style>.bout {border: 1px solid #00b3cd;width:30px;height:30px;text-align:center;float:left;margin-right:5px;border-radius:10px;background-color:#CEF6F5;}.bout:hover {background-color:#2E64FE}.corx {display:none;border: 1px solid #00b3cd;clear:both;max-width:630px;}.td1 {text-align:center;font-family:arial;font-size:1.2em;font-weight:bold;border: 1px solid black;line-height:1.2;}.td2 {border: 1px solid black;font-size:1.2em;text-align:center;line-height:1.5em;}.td3 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;}.td4 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;font-weight:bold;}</style> <center> </div> <table> <tbody> <tr> <td colspan="2" class="td1" style="width:530px;background-color:#CEF6F5;">Poule A-1</td> </tr> <tr> <td class="td2" style="width:50%;color:blue;font-weight:bold;">Club</td> <td class="td2" style="width:50%;color:blue;font-weight:bold;">Nom équipe</td> </tr> <tr> <td class="td3"> Club A </td> <td class="td3"> Les joyeux drilles </td> </tr> <tr> <td class="td3"> Club B </td> <td class="td3"></td> </tr> <tr> <td class="td3"> Club C </td> <td class="td3"> Les joyeux lurons </td> </tr> </tbody> </table>
Partager