Задание границы для строки таблицы HTML, <tr>

Можно ли ограничить строку таблицы <tr>за один раз вместо того, чтобы задавать границу отдельным ячейкам, <td>например,

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

Это дает границу вокруг данного, <tr>но требует границы вокруг отдельных ячеек.

Можно ли дать бордюр <tr>только за один раз?

→ jsFiddle

Вы можете установить borderсвойства для trэлемента, но согласно спецификации CSS 2.1, такие свойства не имеют никакого эффекта в модели с разделенными границами, которая обычно используется по умолчанию в браузерах. Ссылка: 17.6.1 Модель разделенных границ . (The начальное значение border-collapseв separateсоответствии с CSS 2.1, и некоторые браузеры также установить его в качестве значения по умолчанию для table. Чистый эффект в любом случае является то , что вы отделиться границу почти во всех браузерах , если вы явно Удельный collapse.)

Таким образом, вам нужно использовать сворачивающиеся границы. Пример:

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

Абсолютно! Просто используйте

<tr style="outline: thin solid">

на какой гребле вам нравится. Вот скрипка .

Конечно, как уже упоминалось, вы можете сделать это с помощью идентификатора, класса или других средств, если хотите.

Да. Я обновил свой ответ ДЕМО

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

Если вы хотите стилизовать только один, <tr>вы можете сделать это с помощью класса: Second DEMO

Используйте классы CSS:

tr.border{
    outline: thin solid;
}

и используйте его как:

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

Вы можете использовать свойство box-shadow в элементе tr в качестве замены границы. В качестве плюса любое свойство border-radius того же элемента также будет применяться к тени блока.

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

Левая ячейка:

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

средняя ячейка (и):

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

правая ячейка:

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

добавление border-spacing: 0rem 0.5rem; создает пространство для каждой ячейки (td, th) в нижней части, не оставляя места между ячейками

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

После долгой борьбы с этим я пришел к выводу, что поразительно простой ответ - просто заполнить таблицу пустыми ячейками, чтобы заполнить каждую строку таблицы одинаковым количеством ячеек (очевидно, с учетом colspan). С помощью компьютерного HTML это очень просто организовать и позволяет избежать сложных обходных путей. Следующая иллюстрация:

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