Dar un borde a una fila de una tabla HTML, <tr>

¿Es posible bordear una fila de la tabla <tr>de una vez en lugar de dar un borde a celdas individuales, <td>como,

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

Esto da un borde alrededor de lo dado, <tr>pero requiere un borde alrededor de las celdas individuales.

¿Podemos dar un borde a <tr>solo de una vez?

→ jsFiddle

Puede establecer borderpropiedades en un trelemento, pero de acuerdo con la especificación CSS 2.1, tales propiedades no tienen ningún efecto en el modelo de bordes separados, que tiende a ser el predeterminado en los navegadores. Ref .: 17.6.1 El modelo de fronteras separadas . (El valor inicial de border-collapsees separatesegún CSS 2.1, y algunos navegadores también lo establecen como valor predeterminado para table. El efecto neto de todos modos es que obtiene un borde separado en casi todos los navegadores a menos que lo especifique explícitamente collapse)

Por lo tanto, debe utilizar bordes que se derrumben. Ejemplo:

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

¡Absolutamente! Solo usa

<tr style="outline: thin solid">

en la fila que te guste. Aquí tienes un violín .

Por supuesto, como ha mencionado la gente, puede hacerlo a través de una identificación, una clase o algún otro medio si lo desea.

Si. Actualicé mi respuesta 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 quieres estilizar solo uno <tr>, puedes hacerlo con una clase: Segunda DEMO

Hacer uso de clases CSS:

tr.border{
    outline: thin solid;
}

y utilícelo como:

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

Puede usar la propiedad box-shadow en un elemento tr como sustituto de un borde. Como ventaja, cualquier propiedad border-radius en el mismo elemento también se aplicará a la sombra del cuadro.

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

Celda izquierda:

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

midd celda (s):

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

celda derecha:

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

agregando espaciado de bordes: 0rem 0.5rem; crea un espacio para cada elemento de celda (td, th) en su parte inferior sin dejar espacio entre las celdas

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

Después de luchar con esto durante mucho tiempo, he llegado a la conclusión de que la respuesta espectacularmente simple es simplemente llenar la tabla con celdas vacías para rellenar cada fila de la tabla con el mismo número de celdas (teniendo en cuenta colspan, obviamente). Con HTML generado por computadora, esto es muy simple de organizar y evita luchar con soluciones complejas. La siguiente ilustración:

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