Hvordan lage responsivt bord - CSS
Denne artikkelen vil demonstrere hvordan vi kan lage et responsivt bord gjennom CSS.
Hvordan lage/lage et responsivt bord?
Å lage et responsivt bord i HTML krever bruk av "Overflow-X”Eiendom i“”Element der“ Syntaks Her legger "Overflow-X" -egenskapen rullefeltet for å gjøre bordet lydhør. Forutsetning: Lag en tabell Responsivt bord I ovennevnte HTML -kodeutdrag: I CSS -stilelementet er det påkrevd å definere "Overflow-X”Eiendom for å gjøre bordet lydhør. Du kan også legge til noen andre egenskaper for å få bordet til å se mer presentabel ut: I ovennevnte CSS -stilelement: Ovennevnte kode vil lage en bred tabell i utdataene, og følgende vil være skjermen: Hvis skjermstørrelsen minimeres på en slik måte at den strømmer over grensene på skjermen, vil det være en horisontal rullefelt som vises nederst på grunn av bruken av "Overflow-X”Eiendom: Dette avslutter hvordan du lager responsive tabeller i HTML. Konklusjon De responsive tabellene i HTML opprettes ved å legge til CSS “Overflow-X”Eiendom for Div -elementet som tabellen opprettes. Denne egenskapen oppretter ganske enkelt en horisontal rullefelt rett på slutten av tabellen som gjør bordet horisontalt rullbar. Dette innlegget demonstrerte en nyttig metode for å gjøre en enkel tabell responsiv. " er skapt.
Syntaksen for å legge til “Overflow-X”Eiendom for å gjøre tabellen responsiv er som følger:
La oss lage en tabell som er horisontalt utvidet på en slik måte som flommer over skjermbredden ved å legge til flere “”Og“ ”Elementer: Navn Standard Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Poengsum Smith 8 50 50 50 50 50 50 50 50 50 50 50 50 50 Jack 9 70 70 70 70 70 70 70 70 70 70 70 70 70 John 10 55 55 55 55 55 55 55 55 55 55 55 55 55
”Element legges til for å lage en tabell på websiden.
”Element, fire”
”Elementer er lagt til for å lage fire rader av bordet. ”Elementer er lagt til som definerer overskriftsinnholdet. ”Elementer er lagt til for å sette inn innholdet i tabellrader.
Overflow-X: Auto;
Tabell
grense-avstand: 0;
Bredde: 100%;
Border: 1px fast #DDD;
th, td
Tekstalign: Venstre;
polstring: 8px;
TR: NTH-barn (til og med)
Bakgrunnsfarge: #F2F2F2;