Cómo hacer una mesa HTML verticalmente desplazable
Esta publicación explicará el método para hacer que la tabla HTML sea verticalmente desplazable.
Cómo hacer una mesa HTML verticalmente desplazable?
Para crear una tabla verticalmente desplazable en HTML, primero, haga una tabla y agregue los datos relevantes. Luego, aplique las propiedades CSS "desbordamiento" y "desbordamiento".
La propiedad "Overflow-X" con el valor "oculto"Clips el desbordamiento. Además, la propiedad de "desbordamiento" con el valor "Desplazarse"Le permitirá desplazarse hacia arriba y hacia abajo de la mesa.
Para hacerlo, pruebe las instrucciones dadas.
Paso 1: crear un contenedor "div"
En primer lugar, cree un "" envase. Luego, inserte un atributo de clase como un "div-scroll".
Paso 2: crear una tabla en HTML
Para crear una tabla en HTML, siga las instrucciones proporcionadas:
- Crea una tabla utilizando el "
" etiqueta.
- Selecciona el "borde" como "1px"Y alinee la tabla en el centro usando el"alinear" atributo.
- El "
Se utiliza la etiqueta para especificar las filas en la tabla. - "
"La etiqueta se usa para agregar el encabezado a la mesa. - "
"Se utiliza para insertar datos en la tabla: Nombre IDENTIFICACIÓN Categoría Jenny 01 Estibador Herry 02 HTML/CSS Casar 03 Git Llamativo 04 Javascript Eduardo 05 Windows Bella 06 Discordia Conejito 07 Git Jacobo 08 HTML/CSS
Se puede observar que la tabla se ha creado con éxito:
Paso 3: clase de acceso y mesa
Ahora, acceda al "div"Elemento utilizando el".div-scroll" nombre de la clase. El "mesa"Se usa para acceder al elemento de tabla del contenedor Div.
Paso 4: mesa de estilo en CSS
Para peinar la tabla en CSS, utilice las siguientes propiedades:
.Div-scroll, tabla
relleno: 12px;
Altura: 200px;
Ancho: 500px;
Border-Radius: 10px;
Shadow de caja: 1PX 2PX 1PX 2PX RGB (230, 229, 229);
margen: 15px;
borde: 1px sólido #141313;
Color de fondo: #CBeaF8;
Overflow-y: desplazarse;
desbordamiento-x: oculto;
Aquí está la descripción del código mencionado anteriormente:
- "rellenoSe utiliza la propiedad para configurar el espacio alrededor del elemento.
- "altura"Define la altura del elemento que se establece como"200px".
- "ancho"Establece el ancho del elemento.
- "radio fronterizo"Define el radio del elemento. Permite al usuario agregar una esquina redondeada al elemento.
- "sombra de la caja"La propiedad establece el marco de la sombra alrededor del elemento.
- "margen"Se usa para establecer el espacio alrededor del elemento.
- "bordeSe agrega la propiedad para establecer un borde.
- "color de fondoSe utiliza la característica para configurar el color de la mesa en la parte trasera.
- "desbordamiento"Está configurado como"Desplazarse"Para hacerlo verticalmente desplazable.
- "desbordamiento"Especifica el valor como"oculto".
Se puede observar que hemos hecho con éxito la mesa verticalmente desplazable:
Hemos explicado el método para hacer que la tabla sea verticalmente desplazable.
Conclusión
Para que la tabla HTML sea vertical vertical, primero, cree la tabla utilizando el "
" etiqueta. Luego, aplique propiedades CSS para peinar la mesa. Además, establezca el valor del "desbordamiento"Propiedad como"oculto" y "desbordamiento" como "Desplazarse"Para hacer que la mesa sea desplazable. Esta publicación ha proporcionado el procedimiento para hacer que la tabla sea verticalmente desplazable.
- « Cómo fusionar dos matrices en JavaScript y desduplicados elementos
- Cómo hacer una cuenta de administración utilizando Regedit »