CSS3 est border-radius propriété et border-collapse:collapse ne se mélangent pas. Comment puis-je utiliser border-radius pour créer un effondrement de table avec des coins arrondis?

Question

Edit - Titre Original: Est t-il un autre moyen d'atteindre border-collapse:collapse dans le CSS (dans l'ordre d'avoir un effondrement de l', arrondi le coin de la table)?

Puisqu'il s'avère que le fait de simplement obtenir la table des frontières de l'effondrement ne résout pas le problème à la racine, j'ai mis à jour le titre afin de mieux rendre compte de la discussion.

Je suis en train de faire un tableau avec des coins arrondis en utilisant le CSS3 border-radius de la propriété. Les styles de tableau, je suis en utilisant ressembler à quelque chose comme ceci:

table {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px}

Voici le problème. Je tiens également à définir le border-collapse:collapse de la propriété, et si c'est le set border-radius ne fonctionne plus (au moins dans Firefox)(edit - j'ai pensé que cela pourrait être simplement une différence dans mozilla mise en œuvre, mais il s'avère que c'est la façon dont il est censé travailler, selon le w3c). Est-il en fonction de CSS façon je peux obtenir le même effet que border-collapse:collapse sans vraiment l'utiliser?

Modifications:

J'ai fait une simple page pour illustrer le problème ici (Firefox/Safari).

Il semble qu'une grande partie du problème est que la définition de la table pour avoir des coins arrondis n'affecte pas les coins de l'angle des éléments td. Si la table a une seule couleur, ce ne serait pas un problème puisque je pourrait faire le haut et le bas de td coins arrondis pour la première et dernière ligne, respectivement. Cependant, je suis en utilisant différentes couleurs de fond pour le tableau de différencier les en-têtes et de l'entrelacement, de sorte que l'intérieur des éléments td devaient montrer leur coins arrondis.

Résumé de la proposition de solutions:

Entourant la table avec un autre élément avec des coins ronds ne fonctionne pas parce que la table des coins carrés "saigner à travers."

La spécification de la largeur de la bordure à 0 n'a pas d'effondrement de la table.

Fond td coins encore en place après la mise cellspacing à zéro.

À l'aide de javascript au lieu de cela évite le problème.

Solutions possibles:

Les tables sont générées en php, je pouvais l'appliquer à une classe différente pour chaque de la face externe de th/tds et le style de chaque coin séparément. Je préfère ne pas le faire, puisqu'il n'est pas très élégant et un peu de douleur à s'appliquer à plusieurs tables, veuillez donc garder des suggestions à venir.

Solution 2 est d'utiliser javascript (jQuery, plus précisément) de style les coins. Cette solution fonctionne aussi, mais pas encore tout à fait ce que je cherche (je sais je suis pointilleux). J'ai deux réserves: 1) c'est un très léger site, et j'aimerais garder le javascript pour le strict minimum 2) le cadre de l'appel à l'aide de border-radius a pour moi, c'est la dégradation gracieuse et d'amélioration progressive. En utilisant border-radius pour tous les coins arrondis, j'espère avoir toujours arrondi site en CSS3-navigateur compatible et cohérente place du site dans d'autres (je suis à la recherche à vous, c'est à dire).

Je sais que d'essayer de le faire avec CSS3 aujourd'hui peut sembler inutile, mais j'ai mes raisons. Je tiens également à souligner que ce problème est une conséquence de la w3c speficication, pas pauvres, CSS3, de sorte que toute solution sera toujours pertinent et utile lorsque l'on CSS3 a plus d'un large soutien.

Answer 1

J'ai pensé à elle. Vous avez juste à utiliser certains sélecteurs.

Voici un exemple de travail. (edit - ne fonctionne que dans Safari et Firefox pour l'instant)

Le problème avec arrondir les coins de la table était que les éléments td de ne pas devenir arrondis. Vous pouvez résoudre qu'en faisant quelque chose comme ceci:

table tr:last-child td:first-child {
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px
}

table tr:last-child td:last-child {
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px
}

Maintenant, tout les tours correctement, sauf qu'il y a toujours la question de l' border-collapse:collapse à tout casser. Une solution de contournement est de fixer cellspacing=0 dans le html à la place (merci, Joël).

Answer 2

La méthode suivante fonctionne (testé sur Chrome) à l'aide d'un box-shadow avec un écart de l' 1px au lieu d'un "réel" de la frontière.

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Answer 3

Si vous voulez un CSS seule solution (pas besoin de programmer cellspacing=0 dans le HTML) qui permet de 1px frontières (qui vous ne pouvez pas faire avec l' border-spacing: 0 solution), je préfère faire ce qui suit:

• Définir un border-right et border-bottom pour votre table de cellules (td et th)
• Donner les cellules de la première ligne d'un border-top
• Donner les cellules de la première colonne d'un border-left
• À l'aide de l' first-child et last-child sélecteurs, autour de la approprié coins pour les cellules de tableau dans les quatre coins.

Voir une démo ici.

Étant donné le code HTML suivant:

<table>
    <tr>
        <th>item1</th>
        <th>item2</th>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
    </tr>
</table>

Vous pouvez créer des coins arrondis avec ce CSS:

table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 350px;
}
table tr th,
table tr td {
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
    border-left: 1px solid #bbb;
}
table tr th:first-child,
table tr td:first-child {
    border-left: 1px solid #bbb;
}
table tr th {
    background: #eee;
    text-align: left;
}

table.Info tr th,
table.Info tr:first-child td
{
    border-top: 1px solid #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child,
table.Info tr:first-child td:first-child {
    border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child,
table.Info tr:first-child td:last-child {
    border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

Answer 4

Avez-vous essayé d'utiliser table{border-spacing: 0} au lieu de table{border-collapse: collapse} ???

Answer 5

Vous aurez probablement à mettre un autre élément autour de la table et de style avec une bordure arrondie.

Le projet de travail spécifie que border-radius ne s'applique pas aux éléments de la table lors de la ‘border-collapse " est l'effondrement.