Come rendere lo scorrimento della tabella html verticalmente
Questo post spiegherà il metodo per rendere la tabella HTML scorrevole verticalmente.
Come rendere lo scorrimento della tabella html verticalmente?
Per creare una tabella scorrevole verticalmente in HTML, prima, creare una tabella e aggiungere i dati pertinenti. Quindi, applica le proprietà CSS "Overflow-X" E "overflow-y".
La proprietà "overflow-x" con il valore "nascosto"Clips the Overflow. Inoltre, la proprietà "overflow-y" con il valore "scorrere"Ti permetterà di scorrere su e giù dal tavolo.
Per fare ciò, prova le istruzioni fornite.
Passaggio 1: crea un contenitore "div"
Prima di tutto, crea un ""Container. Quindi, inserire un attributo di classe come "scroll di div".
Passaggio 2: crea una tabella in HTML
Per creare una tabella in HTML, seguire le istruzioni fornite:
- Crea una tabella utilizzando il "
"Tag.
- Impostare il "confine" COME "1px"E allineare il tavolo al centro usando il"allineare"Attributo.
- IL "
"Il tag viene utilizzato per specificare le righe nella tabella. - "
"Il tag viene utilizzato per aggiungere l'intestazione al tavolo. - "
"È utilizzato per l'inserimento di dati nella tabella: Nome ID Categoria Jenny 01 Docker Herry 02 HTML/CSS Sposare 03 Idiota Jazz 04 JavaScript Edward 05 finestre Bella 06 Discordia Bunny 07 Idiota Jack 08 HTML/CSS
Si può osservare che la tabella è stata creata correttamente:
Passaggio 3: classe di accesso e tabella
Ora, accedi al "div"Elemento utilizzando il".scroll di div" nome della classe. IL "tavolo"Viene utilizzato per accedere all'elemento tabella del contenitore di div.
Passaggio 4: tavolo di stile in CSS
Per modellare il tavolo in CSS, utilizzare le seguenti proprietà:
.div-scroll, tabella
imbottitura: 12px;
Altezza: 200px;
larghezza: 500px;
raggio di confine: 10px;
Box-Shadow: 1px 2px 1px 2px RGB (230, 229, 229);
Margine: 15px;
Bordo: 1px Solid #141313;
Background-color: #cbeaf8;
overflow-y: scroll;
Overflow-X: nascosto;
Ecco la descrizione del codice sopra indicato:
- "imbottitura"La proprietà viene utilizzata per impostare lo spazio attorno all'elemento.
- "altezza"Definisce l'altezza dell'elemento che è impostata come"200px".
- "larghezza"Imposta la larghezza dell'elemento.
- "raggio di confine"Definisce il raggio dell'elemento. Consente all'utente di aggiungere un angolo arrotondato all'elemento.
- "Box-Shadow"La proprietà imposta la cornice ombra attorno all'elemento.
- "margine"Viene utilizzato per impostare lo spazio attorno all'elemento.
- "confine"La proprietà viene aggiunta per impostare un bordo.
- "colore di sfondo"La funzione viene utilizzata per impostare il colore del tavolo sul retro.
- "overflow-y"È impostato come"scorrere"Per renderlo verticalmente scorrevole.
- "Overflow-X"Specifica il valore come"nascosto".
Si può osservare che abbiamo reso il tavolo scorrevole verticalmente:
Abbiamo spiegato il metodo per rendere la tabella verticalmente scorrevole.
Conclusione
Per rendere la tabella HTML scorrevole verticalmente, crea prima la tabella utilizzando il “
"Tag. Quindi, applica le proprietà CSS per modellare il tavolo. Inoltre, imposta il valore di "Overflow-X"Proprietà come"nascosto" E "overflow-y" COME "scorrere"Per rendere scorrevole il tavolo. Questo post ha fornito la procedura per rendere la tabella scorrevole verticalmente.
- « Come unire due array in javascript e de-duplicate elementi
- Come creare un conto amministrativo utilizzando regedit »