web-dev-qa-db-fra.com

Donner une bordure à une ligne de tableau HTML, <tr>

Est-il possible de border une ligne de tableau, <tr> en une fois au lieu de donner une bordure à des cellules individuelles, <td> comme,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Cela donne une bordure autour du <tr> donné, mais nécessite une bordure autour des cellules individuelles.

Pouvons-nous donner une bordure à <tr> seulement en une fois?

→ jsFiddle

htmlcssborderhtml-table
73
Tiny

Vous pouvez définir les propriétés border sur un élément tr, mais selon la spécification CSS 2.1, ces propriétés n'ont aucun effet dans le modèle de bordures séparées, qui a tendance à être celui par défaut dans les navigateurs. Réf .: 17.6.1 Le modèle des bordures séparées . (La valeur initiale de border-collapse est separate selon CSS 2.1, et certains navigateurs la définissent également comme valeur par défaut pour table. L’effet net est quand même que vous obtenez une bordure séparée sur presque tous les navigateurs, à moins que vous ne spécifiiez explicitement collapse.)

Ainsi, vous devez utiliser des bordures réductibles. Exemple:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
98
Jukka K. Korpela

Absolument! Juste utiliser

<tr style="outline: thin solid">

sur quelle rangée vous aimez. Voici un violon .

Bien sûr, comme les gens l’ont mentionné, vous pouvez le faire via un identifiant, une classe ou un autre moyen si vous le souhaitez.

50
takendarkk

Oui. J'ai mis à jour ma réponse DÉMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Si vous voulez appeler un seul <tr>, vous pouvez le faire avec une classe: Deuxième DEMO

13
Itay Gal

Utiliser les classes CSS:

tr.border{
    outline: thin solid;
}

et l'utiliser comme:

<tr class="border">...</tr>
5
Fanie Reynders

Cellule de gauche:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

cellule (s) intermédiaire (s):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

cellule de droite:

style="border-style:solid;border-width: 1px 1px 1px 0px;"
1
Juergen
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
0
Malik