Metoda 1: Użycie atrybutu „szerokość” HTML
„ szerokość ” to podstawowy atrybut dostarczany przez HTML. Ustawia szerokość lub poziomą długość elementu HTML. Aby naprawić dane tabeli, atrybut szerokości jest używany w poniższych krokach.
Krok 1: Utwórz tabelę Krok 2: Dodaj właściwości CSS do elementu „table”. Krok 3: Przypisywanie właściwości elementowi „td”. Krok 4: Przypisywanie właściwości do „tego” elementu Dane wyjściowe są wyświetlane jako: Powyższa migawka pokazuje, że wszystkie szerokości kolumn są ustalone na 30%. Właściwość nth-child() CSS służy do tworzenia tabeli o stałej szerokości. Ta właściwość pobiera numer kolumny i wybiera „ Dane wyjściowe powyższego bloku kodu to: To wyjście pokazuje, że kolumny o numerach 1 i 3 mają ustaloną szerokość 10%. W środku ' tabela ” w części CSS dodaj „ układ tabeli: naprawiono ”, aby ustawić „szerokość” elementów tabeli danych: W pliku HTML dodaj „ Po wykonaniu powyższego fragmentu kodu wyjście to: W ten sposób użytkownik może ustalić szerokość elementów Aby ustalić szerokość danych tabeli, użyj „ szerokość ' atrybut, ' n-te dziecko ( ) ” separatora i „
W pliku HTML użyj „ <środek> ”, aby wyświetlić każdy znajdujący się w nim element na środku strony internetowej. Wewnątrz niego skonstruuj tabelę, używając „ ' I ' ”oznacza i zapisuje w nim dane:
< Centrum >
< tabela >
< tr >
< cz > Nazwa < / cz >
< cz > Status < / cz >
< cz > Pokój numer < / cz >
< / tr >
< tr >
< td > Fachar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< / tabela >
< / Centrum >
Użyj selektora elementu tabeli w CSS i dodaj „ granica ” o 1 piksele w kolorze czerwonym, „ wyrównanie tekstu ” wyrównuje tekst do środka, a „ szerokość ”, który ustawia całkowitą szerokość tabeli na 80%:
tabela {
granica : 1 px jednolita czerwień;
tekst- wyrównywać : Centrum;
szerokość : 80 %; }
Użyj ' td ” selektor elementu i ustawia „ granica-dół ” o 5 pikselach w kolorze czerwonym, „ wyściółka ” o rozmiarze 20 pikseli, aby element był bardziej widoczny, oraz „ szerokość ” ustawia się jako 30%:
td {
obramowanie u dołu: 5 pikseli w kolorze czerwonym;
wypełnienie: 20px;
szerokość : 30 %;
}
Użyj ' cz selektor elementu, aby zmienić kolor elementu „ granica-dół ” od czerwonego do morskiej zieleni, aby stworzyć lepszą wizualizację:
cz {
obramowanie u dołu: 5 pikseli w kolorze morskozielonym;
wypełnienie: 20px;
szerokość : 30 %;
}
Metoda 2: Używanie selektora „nth-child( )”.
' I ' ” tagi. Na przykład szerokość to „ naprawił ” tylko dla numerów kolumn „ 1 ' I ' 3 ”. Każda z tych kolumn ma szerokość 10%. W tym artykule pomyślnie pokazano, jak naprawić szerokość tabeli danych. td:n-te dziecko ( 3 ) {
szerokość : 10 %;
}
th:n-te dziecko ( 1 ) {
szerokość : 10 %;
}
Metoda 3: Użycie znacznika
układ tabeli: stały;
szerokość : 80 %;
granica : 1 px jednolita czerwień;
tekst- wyrównywać : Centrum;
}
< przełęcz styl = „szerokość: 15%;” / >
< przełęcz styl = 'szerokość: 30%;' / >
danych tabeli.
Wniosek
danych tabeli.