Discussion :

[stevenprioux]

Bonjour à tous,

J'ai un tableau a qui j'arrondis les coins avec border-radius. Mais le problème c'est que les bordures disparaissent.
Voici mon code html:

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
17
18
19
20
21
22
23
24
25
26
27
<table class="card-table">
  <tr>
    <td>
      <table style="border-spacing: 15px;">
        <tr class="is-radius-right-top is-radius-left-top">
          <td>
            <h5 class="font-weight-bold mb-3">Profil</h5>
            <p class="mb-0">Informations à propos de vous</p>
          </td>
          <td>
           <i class="fas fa-user-alt fa-3x"></i>
         </td>
       </tr>
     </table>
   </td>
 </tr>
 <tr>
  <td class="card-td td-button">
    <a href="">Modifier votre mail</a>
  </td>
</tr>
<tr>
  <td class="card-td td-button">
    <a href="">Modifier votre mot de passe</a>
  </td>
</tr>
</table>

Et mon CSS:

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
.card-td, .card-table{
  border: 2px solid rgb(223, 223, 223);
}
.card-table{
  border-radius:10px;  
  overflow: hidden;
}
 
 
.td-button:hover{
 background-color: rgb(220, 220, 220);
}
.td-button{
  background-color: rgb(240, 240, 240);
  height: 30px; 
  width: 160px; 
  font-weight: bold; 
  text-align: center;
}
.td-button a{
  display:block;
  width:100%;
  height:100%;
  line-height:30px;
  text-decoration: none;
  color: black;
  font-family: sans-serif;
  font-weight: 100;
}

Merci de votre aide

[Doksuri]

peux-tu etre plus precis sur ton probleme ?
j'ai teste ton code, j'ai toutes les bordures

[stevenprioux]

Voici le résultat de mon code


J'aimerais que les bordures grises s'affichent mais la ça ne s'affiche pas :/

[Doksuri]

le text de ton screenshot me parrait vachement gros compare au mien
=> t'as pas zoom dans ton navigateur par erreur ?

[Invité]

Bonjour,

montre une page en ligne, ou un code plus complet (car le code fourni ne permet pas, à lui seul, de reproduire le problème).

[NoSmoking]

Bonjour,
ça, sent le border-collapse: collapse qui traine mais mis à part cela je ne trouve quand même pas l'utilisation de <table>, surtout imbriquée, des plus judicieuses.