Table de résolution des coins arrondis en CSS
J'ai cette règle CSS pour les coins arrondis:
th, td { padding: 8px;
background: #E8ECE0;
text-align: center;
border: 1px solid #444;
border-bottom-width: 0px;
}
thead { background-color: #446bb3 ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}
tr:first-child td, tr:first-child th {
border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
border-bottom: 1px solid #444;
border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}
Mon tableau html est:
<table >
<tbody>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
</tbody>
</table>
qui me donne cette
Comment puis-je résoudre ce problème, comme le td éléments dans le tableau et dans le milieu de la table ont des coins arrondis? J'ai seulement besoin de la première ligne et la dernière ligne pour avoir des coins arrondis.
Et quel est ton html? Et la première ligne et la dernière ligne de la table, ou la première et dernière lignes de la
je l'ai ajouté, voir mon edit
Pourriez-vous inclure des exemples de contenu pour que le HTML?
pls voir mon edit
thead
, tbody
..?je l'ai ajouté, voir mon edit
Pourriez-vous inclure des exemples de contenu pour que le HTML?
pls voir mon edit
OriginalL'auteur Smith | 2013-05-19
Vous devez vous connecter pour publier un commentaire.
En supposant que votre
table
'html ressemble à la suivante:Le CSS suivante devrait fonctionner:
JS Fiddle démo.
Édité en réponse à la question de l'OP:
Les frontières entre les cellules sont un peu épais, parce que le bord gauche d'une cellule est contre le bord droit de la précédente cellules (et de même pour le haut/bas frontières).
Un moyen de supprimer cet effet est de spécifier
border-collapse: collapse;
sur letable
élément. Malheureusement, l'effet de cette est de aussi supprimer/annuler/remplacer lesborder-radius
déclarations: démo.Le plus compliqué est de supprimer manuellement haut des frontières pour les lignes avec une ligne précédente et la gauche de la bordure d'une cellule qui s'en suit une cellule, ajoutant ce qui suit à la précédente CSS:
JS Fiddle démo.
Édité à réduire de faire le CSS plus durables (pour une seule cellule de lignes, par l'ajout d'un
tfoot
ou le retrait de l'thead
):JS Fiddle démo.
Il y a un problème avec plusieurs
tbody
éléments, en l'absence d'untfoot
élément, actuellement, dans lequel la premièretbody
conservera les border-radius sur la partie inférieure des frontières.j'ai trouvé une autre question, voir jsfiddle.net/oghenez/4Ue2y
Ouais, j'étais déjà en train de travailler sur ce. Aussi, le nouveau CSS devrait vous permettre de supprimer la
thead
, ajouter untfoot
et ont de multiplestbody
éléments.Malheureusement, plusieurs
tbody
éléments, sanstfoot
, (alors qu'ils ont un uniforme de la frontière d'épaisseur) ont des problèmes avec la courbe du bas-frontières. Il n'y a aucun moyen de déterminer l'absence d'une sœur (que je pense): JS Fiddle démo.OriginalL'auteur David Thomas
Vous pouvez simplement mettre la table en div. Styles pour les div (exemple):
De sorte que le tableau coins cachés.
td {border: 1px}
la bordure apparaît plus mince sous les courbes. Ceci peut être adressé à:first-child
sélecteurs, comme David Thomas solution, ou par la table légèrement plus grand que la div et de positionnement avec destop
etleft
paramètres.simple et belle réponse!!
Totalement fixe mes questions. J'ai essayé beaucoup de différentes compliqué réponses. Facile à comprendre.
OriginalL'auteur Dimitry
Cette réponse ne répond pas directement à votre question, mais une variante.
Si vous ne voulez pas les colonnes du milieu pour avoir des coins arrondis, c'est une solution possible:
Illustration:
Propriétés de la ligne de la table (tr): mettre à jour la table de données (td) pour la plus à gauche de la colonne:
Propriétés de la ligne de la table (tr): mettre à jour la table de données (td) de la deuxième colonne:
Voici un exemple: JS Fiddle démo
Si vous avez plus d'une colonne (td ou th) il suffit d'ajouter quelque chose comme ceci:
OriginalL'auteur rtc11
Vous pouvez réinitialiser le rayon des frontières de la td élément. Que doit résoudre.
OriginalL'auteur marciano
Vous pouvez donner des id pour les éléments td et en utilisant les id des éléments td définir le rayon des frontières à 0px.
OriginalL'auteur Vivek Sadh
Vous devriez essayer un
clear:both;
et il sera remis à zéro.
Vous pouvez également essayer
!important
parce que vous oubliez peut-être d'autres "inline css règles" dans d'autres codes html.OriginalL'auteur Mehmet Taha Meral
Si c'est un vieux la réponse, j'aimerais l'améliorer en ajoutant mes conclusions. En plus de David Thomas'super-smart réponse, j'ai trouvé un cas limite où il n'est pas exactement ajustement: Une seule cellule de la ligne! par exemple:
La règle pour le coin en haut à droite serait de remplacer la règle pour le coin en haut à gauche (parce qu'il vient après), et la règle pour le coin inférieur droit serait de remplacer la règle pour le coin en bas à gauche (pour la même raison). Voir la capture d'écran ci-dessous:
Remplacé Coins http://i57.tinypic.com/v41091.jpg
Le remède en est que le css ci-dessous (j'ai ajouté plusieurs sélecteurs pour divers table, tr, tr-tr, thead-tr combinaisons comme nécessaire, donc vous pouvez également élargir en fonction de votre balisage):
Cette résultats dans la capture d'écran ci-dessous, comme vous le souhaitez:
Fixe les Coins http://i57.tinypic.com/5bqwqq.jpg
Tout le crédit pour cette solution va encore David Thomas, en particulier pour les cellules adjacentes de la frontière truc!
OriginalL'auteur kennasoft