Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 6
    Points : 6
    Points
    6

    Par défaut Border-radius qui cache les bordures

    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

  2. #2
    Membre émérite
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 758
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 758
    Points : 2 921
    Points
    2 921

    Par défaut

    peux-tu etre plus precis sur ton probleme ?
    j'ai teste ton code, j'ai toutes les bordures
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 6
    Points : 6
    Points
    6

    Par défaut

    Voici le résultat de mon code
    Nom : Capture.PNG
Affichages : 24
Taille : 10,9 Ko

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

  4. #4
    Membre émérite
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 758
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 758
    Points : 2 921
    Points
    2 921

    Par défaut

    Nom : dvp.png
Affichages : 21
Taille : 5,1 Ko
    le text de ton screenshot me parrait vachement gros compare au mien
    => t'as pas zoom dans ton navigateur par erreur ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 838
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 838
    Points : 30 141
    Points
    30 141

    Par défaut

    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).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 665
    Points : 33 408
    Points
    33 408

    Par défaut

    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.

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2018
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2018
    Messages : 6
    Points : 6
    Points
    6

    Par défaut

    Merci de vos réponse, finalement j'ai décidé d'utiliser les cards de bootstrap pour ne plus avoir ce problème

    Merci beaucoup quand même !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2007] Ajout d'une ligne qui trace les bordure et remplissage à une macro déjà fonctionnelle
    Par INFINITY100 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 07/05/2015, 03h11
  2. [XL-2007] Ajouter une ligne qui trace les bordures à une macro déjà fonctionnelle
    Par INFINITY100 dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 05/05/2015, 13h37
  3. Réponses: 9
    Dernier message: 07/12/2013, 11h07
  4. [Gtk/Gdk] Image de fond qui cache les widgets
    Par Aspic dans le forum GTK+ avec C & C++
    Réponses: 14
    Dernier message: 10/11/2009, 17h16
  5. Réponses: 2
    Dernier message: 12/03/2009, 13h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo