Надання межі рядку таблиці 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 Модель розділених меж . ( Початкове значення 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">

на якому колись ряду вам подобається. Ось скрипка .

Звичайно, як люди вже згадували, ви можете зробити це за допомогою ідентифікатора, класу або якимось іншим способом, якщо хочете.

Так. Я оновив свою відповідь 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;
}

Якщо ви хочете створити стиль лише одного, <tr>ви можете зробити це за допомогою класу: Second DEMO

Використовуйте класи CSS:

tr.border{
    outline: thin solid;
}

і використовувати його як:

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

Ви можете використовувати властивість box-shadow на елементі tr як заміну межі. Як плюс, будь-яка властивість-радіус кордону в тому самому елементі також застосовуватиметься до тіні вікна.

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

додавання інтервалу між межами: 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>