[html] Giving a border to an HTML table row, <tr>

Is it possible to border a table row, <tr> in one go instead of giving a border to individual cells, <td> like,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">_x000D_
    <tbody>_x000D_
        <tr>_x000D_
            <th style="width: 96px;">Column 1</th>_x000D_
            <th style="width: 96px;">Column 2</th>_x000D_
            <th style="width: 96px;">Column 3</th>_x000D_
        </tr>_x000D_
_x000D_
        <tr>_x000D_
            <td>&nbsp;</td>_x000D_
            <td>&nbsp;</td>_x000D_
            <td>&nbsp;</td>_x000D_
        </tr>_x000D_
_x000D_
        <tr>_x000D_
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>_x000D_
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>_x000D_
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>_x000D_
        </tr>_x000D_
_x000D_
        <tr>_x000D_
            <td>&nbsp;</td>_x000D_
            <td>&nbsp;</td>_x000D_
            <td>&nbsp;</td>_x000D_
        </tr>_x000D_
    </tbody>_x000D_
</table>

This gives a border around the given <tr> but it requires a border around individual cells.

Can we give a border to <tr> only in one go?

→ jsFiddle

After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:

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

Left cell:

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

midd cell(s):

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

right cell:

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

You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.

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

Absolutely! Just use

<tr style="outline: thin solid">

on which ever row you like. Here's a fiddle.

Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.

adding border-spacing: 0rem 0.5rem; creates a space for each cell (td, th) items on its bottom while leaving no space between the cells

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

Make use of CSS classes:

tr.border{
    outline: thin solid;
}

and use it like:

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

Yes. I updated my answer 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;
}

If you want to style only one <tr> you can do it with a class: Second DEMO