Coins de table arrondis CSS uniquement

Question

Coins de table arrondis CSS uniquement

Demandé el 8 de Février, 2011: Quand la question a-t-elle été
379452 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai cherché et cherché, mais je n'ai pas trouvé de solution à mon problème.

J'ai un simple tableau HTML. Je veux des coins arrondis, sans à l'aide d'images ou de JS, c'est-à-dire purement CSS uniquement . Comme ceci :

Table layout sketch

Coins arrondis pour les cellules d'angle, et 1px une bordure épaisse pour les cellules.

Jusqu'à présent, j'ai ceci :

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Mais je n'ai pas de bordures pour les cellules. Si j'ajoute des bordures, elles ne sont pas arrondies !

Des solutions ?

Demandé el 8 de Février, 2011 par 1nfected

Answer 1

5 Réponses

Answer 2

7voto

K. Parker Points 61

C'est un peu grossier, mais voici quelque chose que j'ai mis au point et qui est entièrement composé de CSS et de HTML.

Coins extérieurs arrondis
Ligne d'en-tête
Plusieurs lignes de données

Cet exemple utilise également la fonction :hover pseudo classe pour chaque cellule de données <td> . Les éléments peuvent être facilement modifiés pour répondre à vos besoins, et le survol peut être rapidement désactivé.

(Toutefois, je n'ai pas encore reçu le formulaire de demande d'autorisation. :hover pour fonctionner correctement pour les lignes complètes <tr> . La dernière ligne survolée ne s'affiche pas avec des coins arrondis en bas. Je suis sûr qu'il y a quelque chose de simple qui n'a pas été pris en compte).

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}

/*===== hover effects =====*/

/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/

/* === ROW HOVER === */

/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/

/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Répondu el 22 de Novembre, 2018 par K. Parker (61 Points )

Answer 3

4voto

Kyle Sevenoaks Points 29929

Par expérience, j'ai constaté qu'il n'est pas possible d'arrondir les angles d'un tableau HTML. cellule avec du CSS pur. Il est possible d'arrondir la bordure extérieure d'un tableau.

Vous devrez recourir à l'utilisation d'images comme décrit dans le document ce tutoriel ou toute autre chose similaire :)

Répondu el 8 de Février, 2011 par Kyle Sevenoaks (29929 Points )

Answer 4

3voto

silkfield Points 131

Pour adapter la brillante réponse de @luke flournoy - et si vous n'utilisez pas de th dans votre tableau, voici toutes les feuilles de style CSS dont vous avez besoin pour créer un tableau arrondi :

.my_table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid grey;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
    border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
    border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
    border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
    border-bottom-right-radius: 10px;
}

Répondu el 10 de Mai, 2020 par silkfield (131 Points )

Answer 5

3voto

Jan Turoň Points 6598

Solution 2020

Utilisez une variable CSS pour transmettre le rayon de la bordure du tableau au rayon de la bordure des cellules d'angle, afin de pouvoir modifier le rayon à un seul endroit (comme <table class="rounded" style="--radius: 10px"> )
border-collapse supprime les paramètres du rayon de la bordure et, sans cela, la largeur de la bordure est doublée. Pour que les bordures aient une largeur de 1px, je suggérerais d'utiliser des ombres de boîte pour les cellules (comme box-shadow: -1px -1px black ) ;

/ rounded corners / .rounded { --radius: 5px; --border-color: black; border: 1px solid var(--border-color); border-radius: var(--radius); border-spacing: 0; } .rounded tr:first-child>:first-child { border-top-left-radius: var(--radius); } .rounded tr:first-child>:last-child { border-top-right-radius: var(--radius); } .rounded tr:last-child>:first-child { border-bottom-left-radius: var(--radius); } .rounded tr:last-child>:last-child { border-bottom-right-radius: var(--radius); }

/ design / .rounded th, .rounded td { padding: .2rem; / border: 1px solid var(--border-color); / box-shadow: -1px -1px var(--border-color); } .rounded th { background: hsl(240deg, 100%, 80%); }

<table class="rounded"> <tr> <th>Name <th>Note <tr> <td>Bill Gates <td>Plagiator <tr> <td>Steve Jobs <td>Hipster </table>

@jt3k dans les commentaires suggère une bordure d'un demi-pixel, ce qui est une idée intéressante mais risquée : les spécifications w3 autorisent les nombres réels en pixels, mais elles ne décrivent pas comment les navigateurs sont censés les rendre et certains utilisateurs rapportent que questions avec ceci.

Répondu el 27 de Décembre, 2021 par Jan Turoň (6598 Points )

Answer 6

2voto

Alexandr Points 64

Une autre solution consisterait à utiliser une enveloppe pour le tableau

http://jsfiddle.net/0fmweahc/15/

<div class="table-wrapper">
 <table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
 </table>
</div>

<style>
  .table-wrapper {
    border: 1px solid black;
    border-radius: 20px;
    margin: 10%;
  }

  table, td, th {
    border: 1px solid black;
    padding: 10px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
  }
</style>

Répondu el 1 de Décembre, 2021 par Alexandr (64 Points )

Coins de table arrondis CSS uniquement

Réponses

Solution 2020

Questions en vedette

Top Tags

Prograide.com

Powered by:

Coins de table arrondis CSS uniquement

Réponses

Solution 2020

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: