Atribuindo uma borda a uma linha da tabela HTML, <tr>

É possível delimitar uma linha da tabela de <tr>uma vez em vez de delimitar células individuais, <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>

Isso fornece uma borda ao redor do dado, <tr>mas requer uma borda ao redor das células individuais.

Podemos dar uma fronteira de uma <tr>só vez?

→ jsFiddle

Você pode definir borderpropriedades em um trelemento, mas de acordo com a especificação CSS 2.1, tais propriedades não têm efeito no modelo de bordas separadas, que tende a ser o padrão em navegadores. Ref .: 17.6.1 O modelo de bordas separadas . (O valor inicial de border-collapseestá de separateacordo com CSS 2.1, e alguns navegadores também o definem como valor padrão para table. O efeito líquido de qualquer maneira é que você obtém bordas separadas em quase todos os navegadores, a menos que você especifique explicitamente collapse.)

Portanto, você precisa usar bordas retraídas. Exemplo:

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

Absolutamente! Apenas use

<tr style="outline: thin solid">

em qualquer linha que você gosta. Aqui está um violino .

Claro, como as pessoas mencionaram, você pode fazer isso por meio de um id, ou classe, ou algum outro meio, se desejar.

Sim. Eu atualizei minha resposta 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 você quiser estilizar apenas um, <tr>pode fazê-lo com uma classe: Segundo DEMO

Faça uso de classes CSS:

tr.border{
    outline: thin solid;
}

e usá-lo como:

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

Você pode usar a propriedade box-shadow em um elemento tr como um subtítulo para uma borda. Como um sinal de adição, qualquer propriedade de raio de borda no mesmo elemento também se aplicará à sombra da caixa.

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

Célula esquerda:

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

célula (s) média (s):

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

célula certa:

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

adicionando espaçamento de borda: 0rem 0,5 rem; cria um espaço para cada célula (td, th) itens em sua parte inferior, sem deixar espaço entre as células

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

Depois de lutar com isso por um longo tempo, concluí que a resposta espetacularmente simples é apenas preencher a tabela com células vazias para preencher todas as linhas da tabela com o mesmo número de células (levando o colspan em conta, obviamente). Com HTML gerado por computador, isso é muito simples de organizar e evita conflitos com soluções alternativas complexas. A ilustração segue:

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