Добавить border-bottom в строку таблицы <tr>

У меня есть таблица 3 на 3. Мне нужен способ добавить границу для нижней части каждой строки tr и присвоить ей определенный цвет.

Сначала я попробовал прямой путь, т.е.:

<tr style="border-bottom:1pt solid black;">

Но это не сработало. Поэтому я добавил CSS следующим образом:

tr {
border-bottom: 1pt solid black;
}

Это все еще не сработало.

Я бы предпочел использовать CSS, потому что тогда мне не нужно добавлять атрибут style к каждой строке. Я не добавил атрибут border к <table>. Я надеюсь, что это не повлияет на мой CSS.

Ответ 1

У меня была такая проблема, как раньше. Я не думаю, что tr может напрямую взять границу. Мое обходное решение состояло в том, чтобы стиль td в строке:

<tr class="border_bottom">

CSS

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Ответ 2

Добавьте border-collapse:collapse в правило таблицы:

table { 
    border-collapse: collapse; 
}

Ссылка

Ответ 3

Используйте border-collapse:collapse в таблице и border-bottom: 1pt solid black; в tr

Ответ 4

Используйте

border-collapse:collapse, как писал Натан, и вам нужно установить

td { border-bottom: 1px solid #000; }

Ответ 5

Здесь есть много неполных ответов. Поскольку вы не можете применить границу к тегу tr, вам необходимо применить его к тегам td или th, например:

td {
  border-bottom: 1pt solid black;
}

Выполнение этого будет оставлять небольшое пространство между каждым td, что, вероятно, нежелательно, если вы хотите, чтобы граница отображалась так, как будто это тег tr. Чтобы "заполнить пробелы", так сказать, вам нужно использовать свойство border-collapse в элементе table и установить его значение в collapse, например:

table {
  border-collapse: collapse;
}

Ответ 6

Отобразить строку как блок.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

и просто отобразить альтернативные цвета:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Ответ 7

Используйте

table{border-collapse:collapse}
tr{border-top:thin solid}

Замените "тонкое твердое тело" на свойства CSS.

Ответ 8

Я обнаружил при использовании этого метода, что пространство между элементами td вызвало разрыв в границе, но не страшно...

Один из способов:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

С CSS:

td.end{
    border:2px solid black;
}

Ответ 9

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Вы можете сделать то же самое и со всей строкой.

Существует border-bottom-style, border-top-style, border-left-style, border-right-style. Или просто border-style, которые применяются ко всем четырем границам одновременно.

Вы можете видеть (и ПОПРОБУЙТЕ СЕБЯ онлайн) подробнее здесь

Ответ 10

Вы не можете поставить границу для элемента tr. Это сработало для меня в Firefox и IE 11:

<td style='border-bottom:1pt solid black'>

Ответ 11

Я пытался добавить

    table {
      border-collapse: collapse;
    }

рядом с

    tr {
      bottom-border: 2pt solid #color;
    }

а затем прокомментировал коллапс границы, чтобы увидеть, что работает. У меня просто работал tr селектор со свойством bottom-border!

Без границ CSS отл.

Нет границы Фото в прямом эфире

CSS Border ex.

Стол с бордюром в прямом эфире

Ответ 12

Еще одно решение этой проблемы - свойство border-spacing:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Ответ 13

Отсутствует CSS-граница снизу:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Ответ 14

Вы можете использовать свойство box-shadow для имитации границы элемента tr. Отрегулируйте Y-положение box-shadow (ниже обозначено как 2px), чтобы отрегулировать толщину.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Ответ 15

Несколько интересных ответов. Так как вы просто хотите, чтобы граница снизу (или сверху), вот еще два. Предполагая, что вы хотите синюю рамку толщиной 3 пикселя. В разделе стиля вы можете добавить

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

В коде таблицы либо

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Ответ 16

Мне нужно получить нижнюю границу для работы в строке tr. Вы все пропустили слово STYLE:

tr style="border-bottom:1pt solid green;"

Ответ 17

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}