Come rendere lo scorrimento della tabella html verticalmente

Artemide Ricci
Come rendere lo scorrimento della tabella html verticalmente
HTML è un linguaggio di markup che aiuta gli sviluppatori a creare un sito Web interattivo e le proprietà CSS vengono utilizzate per renderli più reattivi. Può anche determinare come verranno visualizzati gli elementi del sito Web. Più specificamente, tramite le tabelle HTML, gli utenti possono anche creare e archiviare dati estesi in righe e colonne. HTML ti consente anche di scorrere le righe e le colonne in verticale.

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.

    Pitone
    Come faccio a controllare se una stringa è vuota in Python
    Operatore non, funzione len (), funzione strip (), == operatore, __eq __ () metodo o non + str.il me...
    Nunzia Martini
    Pitone
    PANDAS Read_CSV Multiprocessing
    Per migliorare la velocità di caricamento dei dati, compresi i suoi benefici e limitazioni il PD.la ...
    Nick Marini
    Docker
    Qual è lo scopo di una doccia.File YML in Docker?
    Lo scopo principale di un docker.Il file YML è quello di semplificare il processo di distribuzione e...
    Artemide Ricci