Puis-je faire une ligne de table, avec des coins arrondis?

J'ai été en utilisant HTML et CSS pour mettre en forme mon cv, mais je vais avoir des difficultés style a <tr> élément.

N'est-ce pas le travail à l'intérieur d'un tableau ?

-moz-border-radius: 5x;
-webkit-border-radius: 5px;
Pouvez-vous donner un exemple?

OriginalL'auteur Manu | 2010-02-04

  1. 23

    Oui, il fonctionne à l'intérieur d'un tableau de td et th éléments, mais pas sur tr. Vous pouvez également l'utiliser sur table pour arrondir les coins de l'ensemble de la table.

    Si vous voulez arrondir une rangée de cellules de sorte que la gauche et le plus à droite des éléments sont arrondis, vous devez utiliser le :first-child et :last-child pseudo-classes:

    tr td:first-child {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

tr td:last-child {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

    first-child n'est pas pris en charge par IE6, et alors que IE7 ajoute le support pour ça, il manque encore des last-child. Mais ce n'est pas grave, dans votre cas, comme border-radius ne fonctionne pas dans les navigateurs de toute façon.

    "non pris en charge par IE6". Oui, c'est ok. Je suis juste de refaire mon cv, donc tant que ça marche, c'est certains navigateurs qui va être ok. Je vais l'imprimer au format pdf. Merci !

    OriginalL'auteur Tatu Ulmanen

  2. 0

    Je l'ai eu à travailler sans une table, à l'aide de div, avec :

    display: table-cell;
vertical-align: middle;

    OriginalL'auteur Manu

  3. 0
    tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}

    OriginalL'auteur William Hu

  4. -3
    <style type="text/css">
    .test 
    { 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        border: #a9a9a9 1px solid; .
        width: 200px; 
        height: 50px; 
    }
</style>
<table class='test'>
    <tr>
        <td>
           this is a test
        </td>
    </tr>
</table>

    Cela fonctionne pour moi sur Chrome et FF.

    C'est un peu trompeur. Votre ligne a arrondi les angles, parce que vous style une ligne de la table. Vous n'avez pas le style de la ligne elle-même.

    OriginalL'auteur rahul