Scorri a tabella con HTML e CSS
Quando un utente progetta un database per gestire i dati dei dipendenti in un'azienda, la maggior parte dei dati e dei record non possono inserirsi in un unico foglio o tabella. Per gestire i dati, l'utente rende il foglio scorrevole. Esistono due tipi di "scorrevole". Il primo è verticalmente scorrevole e il secondo è orizzontalmente scorrevole. Lo scorrimento orizzontale consente all'utente di scorrere il contenuto della finestra a sinistra o a destra. Mentre la barra di scorrimento verticale consente all'utente di scorrere o scendere il contenuto.
Questo post indicherà:
- Metodo 1: come la tabella di scorrimento in orizzontale con HTML/CSS?
- Metodo 2: come tavolo scorrere verticalmente con HTML/CSS?
Metodo 1: come la tabella di scorrimento in orizzontale con HTML/CSS?
Per creare un tavolo scorrere in orizzontale con HTML/CSS, prima progetta un tavolo utilizzando il “ Per implicazioni pratiche, prova il metodo di seguito. Passaggio 1: aggiungi un contenitore di div Ai fini della creazione di un contenitore div, aggiungi il ""Elemento nel documento HTML. Passaggio 2: progettare una tabella Successivamente, utilizza il “ Passaggio 3: aggiungi i dati nella tabella Quindi, aggiungi i seguenti elementi per aggiungere i dati: Si può vedere che la tabella è stata aggiunta con successo: Passaggio 5: contenitore di divisa di stile Accedi al contenitore Div utilizzando il valore dell'attributo definito con il selettore degli attributi. Per farlo, il "#contenuto principale"È utilizzato in questo scenario: Quindi, applica queste proprietà CSS: Produzione Passaggio 6: Rendi la tabella in orizzontale Ora, utilizza il nome della classe per accedere alla tabella e applicare le proprietà indicate per rendere la tabella scorrevole in orizzontale: Secondo il codice dato: Produzione Passaggio 7: tavolo di stile Ai fini di styling the Table, accedi al "tavolo"E dati tabella con"td": Qui: Passaggio 6: intestazione del tavolo di stile Accedi al tavolo intestazione con l'aiuto di "th": Applicare il "colore di sfondo"Proprietà per impostare il colore sul retro dell'elemento. Metodo 2: come tavolo scorrere verticalmente con HTML/CSS? Per scorrere la tabella verticalmente con HTML/CSS, impostare la larghezza della tabella Accedi alla tabella con l'aiuto del nome della classe ".Data da tavolo"E applicare le proprietà di seguito nello snippet del codice: Qui: Produzione Questo è tutto per la scorrimento del tavolo con HTML e CSS. Conclusione Per fare una scorrimento di tabella con HTML e CSS, prima, crea una tabella usando ""Elemento. Quindi, imposta il "altezza" E "larghezza”Del tavolo in CSS e applica il"overflow"Proprietà con il valore"scorrere".
"Tag per la progettazione di una tabella per aggiungere dati alla pagina HTML. Quindi, aggiungi il seguente attributo all'interno del tag della tabella:
"L'elemento viene utilizzato per definire le righe nella tabella. L'elemento determina una cella come intestazione di un gruppo di celle della tabella. "Viene utilizzato per aggiungere i dati nella tabella: Membri del team Sharqa Membri del team Adnan Membri del team Usama Sharqa Adnan Usama Hafsa Areej Zara Farah Minhal Zainab Maria Anes Faiza Umar Taimoor Awais Farhan Hammad Aliyan Rafia Haroon Yumna Laiba Hadia Rafia Shahrukh Talha danese Nadia Mukh Nimra
Bordo: 3px Groove Blue;
Margine: 30px 60px;
imbottitura: 30px;
larghezza: 250px;
Altezza: 360px;
Overflow: Scroll;
Colore: RGB (66, 40, 233);
Background-color: RGB (243, 164, 164);
Background-color: RGB (193, 225, 228);
larghezza: 400px;
Altezza: 150px;
Overflow: Scroll;
"Elemento. Quindi, accedi alla tabella in CSS e applica "l'altezza", Larghezza e"overflow"Proprietà sul tavolo. A tale scopo, il valore del "overflow"È specificato come"scorrere", Che rende l'elemento scorrevole se i dati dell'elemento sono lunghe. Questo tutorial ha spiegato il metodo per la progettazione della tabella scorrevole con l'aiuto di HTML e CSS.