Coins de table arrondis CSS uniquement

J'ai cherché et recherché, mais je n'ai pas été en mesure de trouver une solution à mon besoin.

J'ai une vieille table HTML. Je veux des coins arrondis pour cela, sans utiliser d'images ou de JS, c'est-à-dire uniquement du CSS pur . Comme ça:

Coins arrondis pour les cellules d'angle et 1pxbordure é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 cela me laisse sans frontières pour les cellules. Si j'ajoute des bordures, elles ne sont pas arrondies!

Des solutions?

Semble fonctionner correctement dans FF et Chrome (je n'ai testé aucun autre) avec des bordures séparées: http://jsfiddle.net/7veZQ/3/

Edit: Voici une implémentation relativement propre de votre croquis:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Pour moi, la solution Twitter Bootstrap semble bonne. Cela exclut IE <9 (pas de coins arrondis dans IE 8 et inférieurs), mais c'est OK, je pense, si vous développez des Web-Apps potentielles.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Vous pouvez jouer avec ça ici (sur jsFiddle)

Tout d'abord, vous aurez besoin de plus que -moz-border-radiussi vous souhaitez prendre en charge tous les navigateurs. Vous devez spécifier toutes les variantes, y compris simples border-radius, comme suit:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Deuxièmement, pour répondre directement à votre question, border-radius n'affiche pas réellement de bordure; il définit simplement l'aspect des coins de la bordure, s'il y en a une.

Pour activer la bordure, et ainsi obtenir vos coins arrondis, vous avez également besoin de l' borderattribut sur vos éléments tdet th.

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

Vous verrez également les coins arrondis si vous avez une couleur d'arrière-plan (ou un graphique), bien que bien sûr, il faudrait une couleur d'arrière-plan différente de l'élément environnant pour que les coins arrondis soient visibles sans bordure.

Il est à noter que certains navigateurs plus anciens n'aiment pas mettre des border-radiustableaux / cellules de tableau. Cela peut valoir la peine de mettre un<div> à l'intérieur de chaque cellule et de le styliser à la place. Cependant, cela ne devrait affecter les versions actuelles d'aucun navigateur (sauf IE, qui ne prend pas du tout en charge les coins arrondis - voir ci-dessous)

Enfin, non pas que IE ne le supporte pas border-radiusdu tout (IE9 beta le fait, mais la plupart des utilisateurs d'IE seront sur IE8 ou moins). Si vous voulez pirater IE pour prendre en charge border-radius, regardez http://css3pie.com/

[ÉDITER]

D'accord, cela me dérangeait, alors j'ai fait des tests.

Voici un exemple de JSFiddle avec lequel j'ai joué

Il semble que l'élément critique qui vous manquait était border-collapse:separate;sur l'élément de table. Cela empêche les cellules de lier leurs bordures ensemble, ce qui leur permet de saisir le rayon de la bordure.

J'espère que ça t'as aidé.

La réponse choisie est terrible. Je mettrais en œuvre cela en ciblant les cellules du tableau d'angle et en appliquant le rayon de bordure correspondant.

Pour obtenir les coins supérieurs, définissez le rayon de bordure sur le premier et le dernier de type des èmes éléments, puis terminez en définissant le rayon de bordure sur le dernier et le premier de type td sur le dernier de type tr pour obtenir les coins inférieurs.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

La meilleure solution que j'ai trouvée pour les coins arrondis et autres comportements CSS3 pour IE <9 peut être trouvée ici: http://css3pie.com/

Téléchargez le plug-in, copiez-le dans un répertoire de la structure de votre solution. Ensuite, dans votre feuille de style, assurez-vous d'avoir la balise de comportement afin qu'elle tire le plug-in.

Exemple simple de mon projet qui me donne des coins arrondis, un dégradé de couleur et une ombre de boîte pour ma table:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Ne vous inquiétez pas si votre Intellisense CSS Visual Studio vous donne le soulignement vert pour les propriétés inconnues, cela fonctionne toujours lorsque vous l'exécutez. Certains éléments ne sont pas très clairement documentés, mais les exemples sont plutôt bons, surtout en première page.

Par expérience personnelle, j'ai découvert qu'il n'est pas possible d'arrondir les coins d'une cellule de tableau HTML avec du CSS pur. Arrondir la frontière la plus externe d'une table est possible.

Vous devrez recourir à l'utilisation d'images comme décrit dans ce tutoriel , ou tout autre similaire :)

C'est un peu approximatif, mais voici quelque chose que j'ai assemblé 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 :hoverpseudo-classe pour chaque cellule de données <td>. Les éléments peuvent être facilement mis à jour pour répondre à vos besoins et le survol peut être rapidement désactivé.

(Cependant, je n'ai pas encore réussi :hoverà faire fonctionner correctement 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 est négligé.)

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>

Ajoutez un <div>wrapper autour de la table et appliquez le CSS suivant

border-radius: x px;
overflow: hidden;
display: inline-block;

à cet emballage.

Pour adapter la réponse brillante de @luke flournoy - et si vous n'utilisez pas thdans votre tableau, voici tout le 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;
}

Pour un tableau encadré et déroulant, utilisez ceci (remplacer les variables, les $textes de départ)

Si vous utilisez thead, tfootou th, remplacez simplement tr:first-childet tr-last-childet tdavec eux.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Vous pouvez essayer ceci si vous voulez les coins arrondis de chaque côté de la table sans toucher les cellules: http://jsfiddle.net/7veZQ/3983/

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

Exemple de HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, facilement converti en CSS, utilisez sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Ce qui suit est quelque chose que j'ai utilisé et qui a fonctionné pour moi sur tous les navigateurs, j'espère donc que cela aidera quelqu'un à l'avenir:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Évidemment, la #contentblockpartie peut être remplacée / modifiée au besoin et vous pouvez trouver le border-radius.htcfichier en effectuant une recherche dans Google ou votre navigateur Web préféré.

C'est css3, seul un navigateur récent non-IE <9 le supportera.

Vérifiez ici , il dérive la propriété round pour tous les navigateurs disponibles

Ajouter entre les <head>balises:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

et dans le corps:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

La couleur, le contenu et la mise en forme des cellules sont bien sûr par exemple;
il s'agit d'espacer les cellules remplies de couleur dans un div. Ce faisant, les bordures de cellule / bordure de tableau noires sont en fait la couleur d'arrière-plan div.
Notez que vous devrez définir le div-border-radius environ 2 valeurs supérieures aux rayons de bordure des coins de cellule séparés, pour obtenir un effet de coin arrondi lisse.

Leçon sur les bordures de tableau ...

REMARQUE: Le code HTML / CSS ci-dessous ne doit être affiché que dans IE. Le code ne sera pas rendu correctement dans Chrome!

Nous devons nous rappeler que:

1. Une table a une bordure: sa limite extérieure (qui peut également avoir un rayon de bordure.)

2. Les cellules elles-mêmes ont ÉGALEMENT des bordures (qui peuvent aussi avoir un rayon de bordure.)

3. Les bordures du tableau et des cellules peuvent interférer les unes avec les autres:

   La bordure de la cellule peut percer la bordure du tableau (c'est-à-dire: la limite du tableau).

   Pour voir cet effet, modifiez les règles de style CSS dans le code ci-dessous comme suit:
   i. table {border-collapse: séparé;}
   ii. Supprimez les règles de style qui entourent les cellules d'angle du tableau.
   iii. Jouez ensuite avec l'espacement des bordures pour voir l'interférence.

4. Cependant, la bordure du tableau et les bordures de cellule peuvent être COLLAPSED (en utilisant: border-collapse: collapse;).

5. Lorsqu'elles sont réduites, les bordures de cellule et de tableau interfèrent d'une manière différente:

   je. Si la bordure du tableau est arrondie mais que les bordures de cellule restent carrées, la forme de la cellule est prioritaire et le tableau perd ses coins incurvés.

   ii. Inversement, si les cellules d'angle sont courbes mais que la limite du tableau est carrée, vous verrez alors un coin carré laid bordant la courbure des cellules d'angle.

6. Étant donné que l'attribut de la cellule est prioritaire, la manière d'arrondir les quatre coins de la table est alors:

   je. Réduire les bordures du tableau (en utilisant: border-collapse: collapse;).

   ii. Définition de la courbure souhaitée sur les cellules d'angle du tableau.
   iii. Peu importe si les coins de la table sont arrondis (c'est-à-dire: son rayon de bordure peut être nul).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}