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


90

Можно ли ограничить строку таблицы <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

Ответы:


121

Вы можете установить 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>

1
@Robert Siemer Хотя это правда, что это ставит границу вокруг строк, это также требует "border-collapse: collapse". Столбцы нельзя размещать таким образом с помощью свойства cellpadding. Свойство схемы, используемое в ответе csmckelvey ниже, обеспечивает больший контроль над внешним видом таблицы и достигает точно такой же цели. Это не должен быть принятым ответом, поскольку он без необходимости ограничивает функциональность для достижения цели.
me_

70

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

<tr style="outline: thin solid">

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

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


2
<tr> должен быть контейнером, а не элементом, поэтому форматирование его потомка с помощью его стиля некорректно с точки зрения семантики, даже если оно работает.
Итай Гал

1
Google Chrome и Internet Explorer показывают рамку вокруг, <tr>но Mozilla Fire Fox не отображает рамку.
Tiny

Попробуйте использовать outlineвместо border. Это должно исправить совместимость. У меня есть только банкомат Chrome, поэтому я не могу его протестировать.
takendarkk 01

4
Очертание - это не граница.
Юкка К. Корпела

2
Совершенно понятно. Этот сайт предназначен для того, чтобы давать людям лучшие ответы, а не для моей репутации :)
takendarkk

16

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

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


Похоже, Internet Explorer не любит last-child(вроде не поддерживает).
Tiny

@Tiny, какую версию IE вы хотите поддерживать? Версия 9+ поддерживает first-child и last-child.
Итай Гал

Это Internet Explorer 8, но особо не беспокойтесь об этом :)
Tiny

Вы не стилизуете <tr>, вы стилизуете <td>.
Роберт Симер


2

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

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

Это дает гораздо больший контроль над стилем, чем outlineдает. Должен быть более высокий ответ.
Джейкоб Штамм,

1

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

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

0

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


Не могли бы вы добавить комментарий к своему ответу и объяснить, что вы изменили?
franiis 04

0

добавление 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;
    }

-2

После долгой борьбы с этим я пришел к выводу, что поразительно простой ответ - просто заполнить таблицу пустыми ячейками, чтобы заполнить каждую строку таблицы одинаковым количеством ячеек (очевидно, с учетом 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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.