Добавить нижнюю границу к строке таблицы <tr>

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

<tr class="border_bottom">

CSS:

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

Таким образом, граница будет применяться ко всем ячейкам в строке.

Чтобы получить желаемый эффект с использованием CSS, вы можете применить свойство border-collapse: collapse к вашей таблице, а также установить стиль border-bottom: 1pt solid black для элементов tr. Это создаст эффект разделения строк таблицы с нижними границами.

Вот пример кода:

<table style="border-collapse: collapse;">
    <tr style="border-bottom: 1pt solid black;">
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
    <tr style="border-bottom: 1pt solid black;">
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
    </tr>
</table>

Обратите внимание, что border-collapse: collapse объединяет границы ячеек, и вам нужно установить нижнюю границу на каждой строке, чтобы добиться видимого разделения между ними. Если вам нужно, чтобы только нижняя граница была видна, убедитесь, что вы не указываете верхние границы для первой строки или границы для других строк.

Чтобы добиться необходимого эффекта, используйте свойство border-collapse: collapse, как написал Натан. Кроме того, вам нужно добавить следующий стиль для ячеек таблицы:

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

Это обеспечит корректное отображение границ таблицы.

На этом сайте много неполных ответов. Поскольку нельзя применить границу к тегу tr, вы должны применить её к тегам td или th, вот так:

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

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

table {
  border-collapse: collapse;
}

Вы можете использовать свойство box-shadow, чтобы имитировать границу для элемента tr. Регулируйте позицию по оси Y (в приведенном примере это 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);
}

Таким образом, вы сможете создать эффект границы для строк таблицы, используя только CSS.