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

Est-il possible de délimiter une ligne de tableau <tr>en une seule fois au lieu de donner une bordure aux 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 donné, <tr>mais cela nécessite une bordure autour des cellules individuelles.

Pouvons-nous donner une frontière <tr>en une seule fois?

→ jsFiddle

Vous pouvez définir des borderpropriétés sur un trélément, 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 la valeur par défaut dans les navigateurs. Réf .: 17.6.1 Le modèle des frontières séparées . (La valeur initiale de border-collapseest separateconforme à CSS 2.1, et certains navigateurs la définissent également comme valeur par défaut pour table. L'effet net de toute façon est que vous obtenez une bordure séparée sur presque tous les navigateurs, sauf si vous spécifiez explicitement collapse.)

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

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

Absolument! Juste utiliser

<tr style="outline: thin solid">

sur quelle ligne vous aimez. Voici un violon .

Bien sûr, comme les gens l'ont mentionné, vous pouvez le faire via un identifiant, une classe ou d'autres moyens si vous le souhaitez.

Oui. J'ai mis à jour ma réponse DEMO

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 en créer un seul, <tr>vous pouvez le faire avec une classe: Deuxième DEMO

Utilisez les classes CSS:

tr.border{
    outline: thin solid;
}

et utilisez-le comme:

<tr class="border">...</tr>

Vous pouvez utiliser la propriété box-shadow sur un élément tr comme sous-titre d'une bordure. De plus, toute propriété border-radius sur le même élément s'appliquera également à l'ombre de la boîte.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Cellule 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;"

ajout de l'espacement des bordures: 0rem 0.5rem; crée un espace pour chaque élément de cellule (td, th) sur son fond tout en ne laissant aucun espace entre les cellules

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Après m'être battu avec cela pendant longtemps, j'ai conclu que la réponse incroyablement simple est de simplement remplir le tableau avec des cellules vides pour remplir chaque ligne du tableau avec le même nombre de cellules (en tenant compte de colspan, évidemment). Avec le HTML généré par ordinateur, c'est très simple à organiser et évite de se battre avec des solutions de contournement complexes. L'illustration suit:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>