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

Ответ 1

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

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

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

Ответ 2

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

<tr style="outline: thin solid">

на котором вам всегда нравятся строки. Здесь fiddle.

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

Ответ 3

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

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

Ответ 4

Использовать классы CSS:

tr.border{
    outline: thin solid;
}

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

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

Ответ 5

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

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

midd cell (s):

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

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

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

Ответ 6

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

Ответ 7

После долгой борьбы с этим я пришел к выводу, что невероятно простой ответ состоит в том, чтобы просто заполнить таблицу пустыми ячейками, чтобы заполнить каждый ряд таблицы одинаковым количеством ячеек (очевидно, с учетом 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>