it-swarm.com.ru

Задание границы для строки таблицы 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

71
Tiny

Вы можете установить свойства 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>
96
Jukka K. Korpela

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

<tr style="outline: thin solid">

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

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

48
takendarkk

Да. Я обновил свой ответ 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

13
Itay Gal

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

tr.border{
    outline: thin solid;
}

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

<tr class="border">...</tr>
5
Fanie Reynders

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

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;"
1
Juergen
<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>
0
Malik