Как добавить нижнюю границу в строку таблицы?

Kak Dobavit Niznuu Granicu V Stroku Tablicy

Свойство CSS «border-bottom» используется для добавления границы внизу любого HTML-элемента. Хотя это не влияет напрямую на строку таблицы. Причина в том, что свойство border-collapse имеет отдельное предопределенное значение и не допускает стиль строки. В этом руководстве показано, как применить нижнюю границу к элемента таблицы.

Как добавить нижнюю границу в строку таблицы ?
Установите border-bottom в строку таблицы Element
Элемент таблицы стилей
Элемент стиля «td»
Стиль элемента «tr»

Как добавить нижнюю границу в строку таблицы ?

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

Подробный пример добавления border-bottom к строке таблицы показан ниже:

Установите border-bottom в строку таблицы

Создайте простую таблицу, содержащую 3 строки и 3 столбца в нашем HTML-файле, используя элементы , и :

< стол >
< тр сорт '=' 'ряд' >
< й > Имя < / й >
< й > Положение дел < / й >
< й > Комната нет < / й >
< / тр >
< тр сорт '=' 'ряд' >
< тд > Фахар < / тд >
< тд > Студент < / тд >
< тд > 05 < / тд >
< / тр >
< тр сорт '=' 'ряд' >
< тд > Омар < / тд >
< тд > Студент < / тд >
< тд > 05 < / тд >
< / тр >
< / стол >

В приведенном выше фрагменте кода мы присвоили класс «row» строкам таблицы , чтобы к нему можно было получить доступ позже в CSS.

Веб-страница будет выглядеть так:

Элемент таблицы стилей

В части CSS выберите элемент таблицы и выровняйте текст по центру. После этого используйте « обрушение границы », чтобы свернуть его значение:

стол
{
граница коллапса: коллапс;
выравнивание текста: по центру;
}

Элемент стиля «td»

Для лучшего визуального представления давайте добавим отступ 20px к элементам данных таблицы «» и заголовку таблицы «»:

тд
{
отступ: 20 пикселей;
}
й
{
отступ: 20 пикселей;
}

Вывод выглядит следующим образом:

Приведенный выше вывод показал отступ 20 пикселей и выровнял текст по центру.

Стиль элемента «tr»

В файле CSS добавьте свойство border-bottom под селектор «tr». Он присваивается каждой строке таблицы, включая строку заголовка. Например, установите для него значение 2px solid darkcyan:

тр {
нижняя граница: 2px сплошной темно-голубой;
}

После выполнения приведенного выше фрагмента кода веб-страница выглядит так:

Это все о том, как добавить границу внизу каждой строки таблицы».

».

Заключение

Чтобы добавить рамку внизу элемента , задайте для свойства CSS border-collapse значение «свернуть» и используйте свойство border-bottom для элемента «». Это позволяет свойству CSS применять границы к таблице. Вот как вы можете легко добавить нижнюю границу к каждому тегу «

».

Как добавить нижнюю границу в строку таблицы?