[CSS 3] Toucher les 3 coins d'un tableau uniquement [Résolu]

[Phrederik]

Bonjour.

Je cherche à toucher les cellules de coin d'un tableau uniquement en css.
pour le moment j'ai réussit pour les 2 coins superieur, mais je n'arrive pas a sélectionner les 2 coins inferieur seulement.

Une idée ?

Le but est de crée un arrondis dans le tableau et palier au problème de coin non arrondis apres un background-color.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
table
{
	/*background-color:#000000;*/
	border:#000;
}
 
table, th:first-child
{
	border-radius:10px;	
}
table, th:last-child
{
	border-radius:10px;	
}
 tr:last-child :td:last-child 
{
	border-radius:10px;	
}

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
<table width="100%" border="1" cellspacing="1" cellpadding="0">
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

On est d'accord, le code fait partie d'une page test que j'utilise pour crée un code qui fonctionnerait sur tout mon site

[Phrederik]

J'ai trouver, desolé du derangement :/

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table, th:first-child
{
	border-radius:10px;	
}
table, th:last-child
{
	border-radius:10px;	
}
tr:last-child td:last-child 
{
	border-radius:10px;	
}
tr:last-child td:first-child 
{
	border-radius:10px;	
}