Coins de table arrondis CSS uniquement
J'ai cherché et cherché, mais je n'ai pas pu trouver de solution à mes besoins.
J'ai un simple tableau HTML. Je veux des angles arrondis, sans en utilisant des images ou JS, c’est-à-dire pur CSS uniquement . Comme ça:
Coins arrondis pour les cellules de coin et 1px bordure épaisse pour les cellules.
Jusqu'ici 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 ne me laisse aucune frontière pour les cellules. Si j'ajoute des bordures, elles ne sont pas arrondies!
Des solutions?
Semble fonctionner correctement dans FF et Chrome (n’en ont 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>Premièrement, vous aurez besoin de plus que -moz-border-radius si vous voulez supporter tous les navigateurs. Vous devez spécifier toutes les variantes, y compris plain 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'apparence des angles de la bordure, le cas échéant.
Pour activer la bordure et obtenir ainsi vos angles arrondis, vous devez également disposer de l'attribut border sur vos éléments td et 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 qu'il faille bien sûr que la couleur d'arrière-plan soit différente de celle 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 border-radius sur des tableaux/cellules de tableau. Il peut être intéressant de mettre un <div> dans chaque cellule et de le styler. Cependant, cela ne devrait pas affecter les versions actuelles des navigateurs (sauf IE, qui ne supporte pas du tout les coins arrondis - voir ci-dessous)
Enfin, pas que IE ne supporte pas du tout border-radius (IE9 beta le fait, mais la plupart IE les utilisateurs seront sur IE8 ou moins). Si vous voulez pirater IE pour prendre en charge border-radius, regardez http://css3pie.com/
[MODIFIER]
Ok, ça me dérangeait, alors j'ai fait quelques tests.
Voici un exemple de JSFiddle avec lequel je joue
Il semble que l'élément critique qui vous manquait était border-collapse:separate; dans l'élément table. Cela empêche les cellules de relier leurs frontières, ce qui leur permet de saisir le rayon de la frontière.
J'espère que cela pourra aider.
Pour moi, la Solution Bootstrap de Twitter a bonne mine. Il exclut IE <9 (pas de coins arrondis dans IE 8 et inférieur), mais c'est O.K. Je pense que si vous développez des applications Web 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)
Grâce à mon expérience personnelle, j'ai constaté qu'il n'était pas possible d'arrondir les angles d'un tableau HTML cell avec du CSS pur. Il est possible de contourner la bordure la plus externe d'une table.
Vous devrez utiliser des images comme décrit dans ce tutoriel , ou quelque chose de similaire :)
La meilleure solution que j'ai trouvée pour les angles arrondis et d'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 pour pouvoir insérer le plug-in.
Exemple simple tiré de mon projet, qui me donne des coins arrondis, un dégradé de couleurs et une zone d’ombre 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, il 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, notamment en première page.
La réponse choisie est terrible. Je mettrais cela en œuvre en ciblant les cellules de la table de coin et en appliquant le rayon de bordure correspondant.
Pour obtenir les coins supérieurs, définissez le rayon de la bordure sur le premier et le dernier type des éléments th , puis terminez en définissant le rayon de la bordure sur le dernier et le premier de td type sur le dernier 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;
}
C'est un peu approximatif, mais voici quelque chose que j'ai composé et qui est entièrement composé de CSS et de HTML.
- Coins extérieurs arrondis
- Rangée d'en-tête
- Plusieurs lignes de données
Cet exemple utilise également la pseudo-classe :hover 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 obtenu que le :hover fonctionne correctement pour les lignes complètes <tr>. La dernière ligne survolée ne s'affiche pas avec des coins arrondis au 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>Exemple 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;
}
}
Leçon dans les bordures de table ...
REMARQUE: Le code HTML/CSS ci-dessous ne doit être visualisé que dans IE. Le code ne sera pas rendu correctement dans Chrome!
Nous devons nous rappeler que:
Une table a une bordure: sa limite extérieure (qui peut aussi avoir un bord-rayon).
Les cellules elles-mêmes ont aussi des frontières (qui peuvent aussi avoir un rayon de bord).
Les bordures de table et de cellule peuvent se gêner:
La bordure de cellule peut traverser la bordure de la table (c'est-à-dire: la limite de la table).
Pour voir cet effet, modifiez les règles de style CSS dans le code ci-dessous comme suit:
je. table {border-collapse: separer;}
ii. Supprimez les règles de style qui entourent les cellules de coin du tableau.
iii. Ensuite, jouez avec un espacement de bordure afin de voir les interférences.Cependant, les bordures du tableau et des cellules peuvent être COLLAPSED (avec: border-collapse: collapse;).
Lorsqu'elles sont réduites, les frontières de la cellule et du tableau interfèrent de manière différente:
je. Si la bordure de la table est arrondie mais que les bordures des cellules restent carrées, la forme de la cellule est prioritaire et la table perd ses coins incurvés.
ii. Inversement, si les cellules du coin sont courbes mais que la limite de la table est carrée, vous verrez alors un coin carré et moche bordant la courbure des cellules du coin.
Etant donné que l'attribut de cette cellule a la priorité, le moyen de contourner les quatre coins de la table est le suivant:
je. Réduire les bordures de la table (en utilisant: border-collapse: collapse;).
ii. Définir votre courbure souhaitée sur les cellules d'angle de la table.
iii. Peu importe que les coins de la table soient arrondis (c'est-à-dire que 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>Ce qui suit est quelque chose que j'ai utilisé qui a fonctionné pour moi sur tous les navigateurs. J'espère que cela aidera quelqu'un dans le futur:
#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 partie #contentblock peut être remplacée/modifiée au besoin et vous pouvez trouver le fichier border-radius.htc en effectuant une recherche dans Google ou votre navigateur Web préféré.
Utilisez ceci pour un tableau avec bordure et défilement (remplacer les variables, $ textes de départ)
Si vous utilisez thead, tfoot ou th, remplacez simplement tr:first-child et tr-last-child et td par 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>
Ceci est css3, seul le navigateur récent non-IE <9 le supportera.
Découvrez ici , il dérive la propriété round de tous les navigateurs disponibles
Ajoutez entre les balises <head>:
<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> </td>
<td>Noord</td>
<td> </td>
<td style="border-top-right-radius: 10px;">
Noordoost
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>West</td>
<td> </td>
<td>Centrum</td>
<td> </td>
<td>Oost</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-bottom-left-radius: 10px;">
Zuidwest
</td>
<td> </td>
<td>Zuid</td>
<td> </td>
<td style="border-bottom-right-radius: 10px;">
Zuidoost
</td>
</tr>
</table>
</div>
La couleur, le contenu et le formatage des cellules sont bien sûr par exemple;
Il s’agit d’espacer les cellules de couleur remplies au sein d’un div.
Notez que vous devez définir le div-border-radius sur environ 2 valeurs supérieures aux rayons de bord de coins de cellule distincts pour obtenir un effet de coin arrondi et lisse.