En-tête du tableau avec des coins arrondis et des frontières

J'
s-il possible pour les en-têtes de tableau pour avoir des coins arrondis ET un 1px frontière?

Lorsque j'applique une frontière, il ne s'applique pas pour les coins arrondis, mais à la table de la frontière, de sorte que la frontière coins sont carrés.

Comment puis-je faire cela?

Voici le CSS:

.example th {
border: 1px solid #ddd;
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top,  #eee,  #ddd);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd');
color: #444;
    }

Les coins arrondis sont appliqués pour la première et la liste des enfants th:
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;

Ma solution est d'ajouter un span ou div dans mes cellules.
veuillez ajouter la balise pertinente, peut-être qu'il ne fonctionne pas avec des tables ou peut-être votre marque a une erreur
n'oubliez pas d'accepter une réponse si cela vous a aidé, en tant que base de la courtoisie envers les autres...

OriginalL'auteur user1438243 | 2012-06-05

4

Ce fait tous de la table des en-têtes (si vous utilisez sémantique th plutôt des cellules du corps td des cellules) ont des coins arrondis, mais si vous le souhaitez pour seulement une sélection de tables - puis renommez la classe table.rounded th et juste ajouter rounded classe à ces tables:
```
th
{ 
-khtml-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: solid 1px black;
}
```
EDIT: vous avez besoin d'avoir border-collapse: separate; sur votre table pour que cela soit possible...

C'est à peu près ce que j'ai droit maintenant, et c'est la création de carrés bordure de coins...
votre table elle-même ne doit pas avoir de frontières, et de vérifier dans le navigateur outils de développement si cela devient appliquée dans le calcul des styles (peut-être quelque chose le dépasse)? et un jsfiddle serait un must... oh, et est-ce que votre navigateur en fait de support arrondi tables?
cochez la case modifier, on peut supposer - mais vous avez probablement raté

OriginalL'auteur Nikola Bogdanović

Pourriez-vous essayer d'ajouter un div conteneur à l'intérieur de chaque th

Par Exemple: http://jsfiddle.net/y6VNe/5/

<table>
   <tr>
       <th><div>A</div></th>
       <th><div>B</div></th>
       <th><div>C</div></th>
       <th><div>D</div></th>
   </tr>
</table>

CSS

th div{
   border:1px solid black;
   width:80px;    
   text-align:center;
   border-radius: 10px;
}

Ce serait sans doute le travail, je suis juste à la recherche de la plus simple et la moins hacky façon de faire. Idéalement avec aucune autre HTML.

OriginalL'auteur Brad

0

Je me rends compte que c'est un vieux thread, mais hein.
vous pouvez utiliser la boîte de faire de l'ombre à la faux de la frontière.

box-shadow: 0px 0px 2px #ddd inset;

Admiddetly, il y a quelques problèmes avec la couleur plus claire, vous aurez à compenser.

OriginalL'auteur Kao
-3

Il est une propriété CSS3 pour appliquer les coins arrondis appelé border-radius

Voici un lien qui devrait vous aider:

http://www.yourhtmlsource.com/tables/roundedcorners.html

Et voici un autre avec une grande explication:

http://davidwalsh.name/css-rounded-corners

Je suis déjà en utilisant rayon des frontières. le problème est que, bien que l'en-tête de tableau s'affiche avec des coins arrondis, la frontière est toujours en place. Voici le css: .exemple th { border: 1px solid #ddd; background: #444; background: -webkit-gradient(linear, left top, left bottom, from(#eee), à(#ddd)); background: -moz-linear-gradient(top, #eee, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd"); color: #444; }

OriginalL'auteur user1266515

Vous devez vous connecter pour publier un commentaire.