Saltar al contenido

ejemplo de código de bootstrap 4 de tabla desplazable

Después de de una prolongada compilación de datos hemos podido solucionar esta traba que suelen tener muchos lectores. Te brindamos la solución y esperamos serte de mucha ayuda.

Ejemplo 1: cómo configurar el desplazamiento en el cuerpo de la tabla bootstrap4

table 
    display: flex;
    flex-flow: column;
    width: 100%;


thead 
    flex: 0 0 auto;


tbody 
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;


tr 
    width: 100%;
    display: table;
    table-layout: fixed;

Ejemplo 2: tabla bootstrap 3

Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table
------------------------------------------------------------
Striped Rows
The .table-striped class adds zebra-stripes to a table

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
------------------------------------------------------------
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
------------------------------------------------------------
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half
------------------------------------------------------------
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>)

The contextual classes that can be used are:

Class		Description
.active		Applies the hover color to the table row or table cell
.success	Indicates a successful or positive action
.info		Indicates a neutral informative change or action
.warning	Indicates a warning that might need attention
.danger		Indicates a dangerous or potentially negative action
------------------------------------------------------------
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference

Sample code

DOCTYPEhtml><htmllang="en"><head><title>Bootstrap Exampletitle><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>head><body><divclass="container"><h2>Bootstrap Table Exampleh2><tableclass="table -----------">  // try by adding different table class at this place => ("-----------")
    <thead><tr><th>Idth><th>Nameth><th>Ageth>tr>thead><tbody><tr><td>1td><td>Ramtd><td>10td>tr><tr><td>2td><td>Shyamtd><td>12td>tr><tr><td>3td><td>Rameshtd><td>13td>tr><tr><td>4td><td>Sureshtd><td>11td>tr>tbody>table>div>body>html>

Aquí tienes las reseñas y puntuaciones

Te invitamos a añadir valor a nuestra información aportando tu veteranía en las notas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *