Как да коригирам td ширината на CSS таблица?

Kak Da Korigiram Td Sirinata Na Css Tablica



HTML предоставя „ <таблица> ' таг за създаване на таблици и разработчикът може да коригира ширината на данните в таблицата ' ” елемент. Целта е да се възприемат промените, които настъпват по време на преоразмеряването на екрана, или да се изтрият допълнителните пространства, които са заети от таблицата. Тази статия ще демонстрира как да коригирате данните в таблицата ' ” елементи.

Метод 1: Използване на HTML атрибут „ширина“.

ширина ” е основен атрибут, предоставен от HTML. Той задава ширината или хоризонталната дължина на HTML елемента. За коригиране на данни от таблица, атрибутът за ширина се използва в стъпките по-долу.

Стъпка 1: Създайте таблица
В HTML файла използвайте „ <център> ” за показване на всеки елемент в него в центъра на уеб страницата. Вътре в нея изградете таблица, като използвате „ <таблица> ”,” ' и ' ” тагове и запишете данни в него:







< център >
< маса >
< тр >
< th > Име < / th >
< th > Статус < / th >
< th > Стая № < / th >
< / тр >
< тр >
< td > Факхар < / td >
< td > Студент < / td >
< td > 06 < / td >
< / тр >
< тр >
< td > Омар < / td >
< td > Студент < / td >
< td > 06 < / td >
< / тр >
< / маса >
< / център >

Стъпка 2: Добавете CSS свойства към елемента „таблица“.
Използвайте селектора на елемент на таблица в CSS и добавете „ граница ” от 1 пиксел плътно червено, „ подравняване на текст ” подравнява текста към центъра, а „ ширина ”, който задава общата ширина на таблицата на 80%:



маса {
граница : 1px непрекъснато червено;
текст- подравнете : център;
ширина : 80 %; }

Стъпка 3: Присвояване на свойства на елемент „td“.
Използвай ' td ” селектор на елементи и задава „ граница-отдолу ” от 5 пиксела плътно червено, „ подплата ” от 20 пиксела, за да направите елемента по-видим, и „ ширина ” задава като 30%:



td {
граница-отдолу: 5px плътно червено;
padding:20px;
ширина : 30 %;
}

Стъпка 4: Присвояване на свойства на „ти“ елемент
Използвай ' th ” селектор на елемент за промяна на цвета на „ граница-отдолу ” от червено до морско зелено, за да създадете по-добра визуализация:





th {
граница-отдолу: 5px плътно морскозелено;
padding:20px;
ширина : 30 %;
}

Изходът се показва като:



Горната моментна снимка показва, че ширините на всички колони са фиксирани на 30% всяка.

Метод 2: Използване на селектора „nth-child( )“.

Свойството nth-child() на CSS се използва за създаване на таблица с фиксирана ширина. Това свойство получава номера на колоната и избира „ ' и ' ” етикети. Например ширината е ' фиксирани ” само за номера на колони ” 1 ' и ' 3 ”. Всяка от тези колони получава ширина от 10%. Тази статия успешно демонстрира как да коригирате ширината на таблицата с данни.

td:n-то дете ( 3 ) {
ширина : 10 %;
}
th:nth-дете ( 1 ) {
ширина : 10 %;
}

Резултатът от горния кодов блок е:

Този изход показва, че колони с номера 1 и 3 са фиксирани на ширина от 10%.

Метод 3: Използване на етикет

Вътре в „ маса ” в частта за CSS добавете „ оформление на таблица: фиксирано ”, за да зададете „ширината” на елементите на таблицата с данни:

маса {
оформление на таблица: фиксирано;
ширина : 80 %;
граница : 1px непрекъснато червено;
текст- подравнете : център;
}

В HTML файла добавете „ ” етикет вътре в „ <таблица> ” раздел. Например, фиксирайте ширината от 15% за първата колона и 30% за втората колона:

< маса >
< полк стил = 'ширина: 15%;' / >
< полк стил = 'ширина: 30%;' / >

След изпълнение на горния кодов фрагмент, изходът е:

Това е начинът, по който потребителят може да фиксира ширината на елементите на таблицата с данни.

Заключение

За да коригирате ширината на данните в таблицата, използвайте „ ширина ' атрибут, ' n-то дете( ) ” разделител и „ ” методи за етикети. „ ширина ” свойството задава фиксираната ширина. Разделителят „nth-child()“ получава номера на колоната като параметър. Освен това „ ” може да се използва, за да направи таблицата негъвкава. Тази статия демонстрира как да коригирате ширината на елементите на таблицата с данни.