- Как добавить нижнюю границу в строку таблицы
? - Установите 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 применять границы к таблице. Вот как вы можете легко добавить нижнюю границу к каждому тегу «
». - Установите border-bottom в строку таблицы