Assegnando un bordo a una riga della tabella HTML, <tr>

È possibile bordare una riga di tabella, <tr>in una volta sola invece di dare un bordo a singole celle, <td>come,

<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>

Questo dà un bordo attorno al dato <tr>ma richiede un bordo attorno alle singole celle.

Possiamo dare un confine <tr>solo in una volta?

→ jsFiddle

Puoi impostare le borderproprietà su un trelemento, ma secondo la specifica CSS 2.1, tali proprietà non hanno effetto nel modello con bordi separati, che tende ad essere l'impostazione predefinita nei browser. Rif .: 17.6.1 Il modello dei bordi separati . (Il valore iniziale di border-collapseè separateconforme a CSS 2.1 e alcuni browser lo impostano anche come valore predefinito per table. L'effetto netto comunque è che si ottengono bordi separati su quasi tutti i browser a meno che non si specifichi esplicitamente collapse.)

Pertanto, è necessario utilizzare i bordi collassati. Esempio:

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

Assolutamente! Basta usare

<tr style="outline: thin solid">

su quale fila mai ti piace. Ecco un violino .

Ovviamente, come hanno detto le persone, puoi farlo tramite un id, una classe o altri mezzi se lo desideri.

Sì. Ho aggiornato la mia risposta 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;
}

Se vuoi modellarne solo uno <tr>puoi farlo con una classe: Second DEMO

Utilizza le classi CSS:

tr.border{
    outline: thin solid;
}

e usalo come:

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

Puoi usare la proprietà box-shadow su un elemento tr come sottotituto per un bordo. Inoltre, qualsiasi proprietà border-radius sullo stesso elemento verrà applicata anche all'ombra del riquadro.

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

Cella sinistra:

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

cellula (e) centrale:

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

cella a destra:

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

aggiunta della spaziatura del bordo: 0rem 0,5rem; crea uno spazio per ogni elemento di cella (td, th) sul fondo senza lasciare spazio tra le celle

    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;
    }

Dopo aver combattuto con questo per molto tempo, ho concluso che la risposta straordinariamente semplice è semplicemente riempire la tabella con celle vuote per riempire ogni riga della tabella con lo stesso numero di celle (tenendo conto di colspan, ovviamente). Con l'HTML generato dal computer è molto semplice da organizzare ed evita di dover combattere con soluzioni alternative complesse. Segue l'illustrazione:

<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>