- Как да добавите Border-Bottom към ред на таблица
? - Задайте border-bottom на Table Row
Element - Елемент на стилова таблица
- Елемент стил 'td'.
- Елемент стил „tr“.
Как да добавите Border-Bottom към ред на таблица
? Добавянето на границата отдолу към реда на таблицата ще добави границата към целия ред, за да направи по-добро визуално изживяване и да привлече вниманието на потребителя.
Подробен пример за добавяне на долна граница към ред
на таблицата е демонстриран по-долу:
Задайте border-bottom на реда на таблицата
Създайте проста таблица, съдържаща 3 реда и 3 колони в нашия HTML файл, които са направени с помощта на
, и елементи:
< маса >
< тр клас = 'ред' >
< th > Име < / th >
< th > Статус < / th >
< th > Стая № < / th >
< / тр >
< тр клас = 'ред' >
< td > Факхар < / td >
< td > Студент < / td >
< td > 05 < / td >
< / тр >
< тр клас = 'ред' >
< td > Омар < / td >
< td > Студент < / td >
< td > 05 < / td >
< / тр >
< / маса >В горния кодов фрагмент сме присвоили клас „ред“ на редовете на таблицата
, така че да може да бъде достъпен по-късно в CSS.
Уеб страницата ще изглежда така:
Елемент на стилова таблица
В CSS частта изберете елемента на таблицата и подравнете текста към центъра. След това използвайте „ граница-колапс ”, за да зададете стойността му да се свие:
маса
{
border-collapse: колапс;
подравняване на текст: център;
}Елемент стил „td“.
За по-добро визуално представяне, нека да дадем подложка от 20 пиксела на елементите с данни на таблицата „
“ и заглавката на таблицата „ “: td
{
padding:20px;
}
th
{
padding:20px;
}Резултатът изглежда така:
Горният изход показва подложка от 20px и подравнява текста към центъра.
Елемент стил „tr“.
В CSS файла добавете свойството border-bottom под селектора „tr“. Присвоява на всеки ред от таблицата, включително заглавния ред. Например, задайте стойността му на 2px solid darkcyan:
тр {
граница-отдолу: 2px плътно тъмноциан;
}След изпълнение на горния кодов фрагмент, уеб страницата изглежда така:
Това е всичко за това как да добавите граница в долната част на всеки ред на таблица '
”. Заключение
За да добавите граница в долната част на елемента
, задайте свойството border-collapse на CSS да се свие и използвайте свойството border-bottom на елемента “ ”. Позволява на свойството CSS да прилага граници върху таблицата. Ето как можете лесно да добавите граница отдолу към всеки таг “
”. - Задайте border-bottom на Table Row