¿Cómo agregar una barra de desplazamiento a una tabla HTML5?

Tengo una tabla en HTML5 a la que me gustaría agregar una barra de desplazamiento. Quiero que la tabla muestre diez filas y luego el usuario puede desplazarse hacia abajo para ver otras canciones. ¿Cómo puedo agregar la barra de desplazamiento?

Aquí está mi código para la tabla en HTML5:

URL
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw

Aquí está mi código CSS:

 #my_table { border-radius: 20px; background-color: transparent; color: black; width: 500px; text-align: center; } 

Si tiene que dirigirse a las columnas de su tabla y no desea desplazar esos títulos, esta solución podría ayudarlo a:

Esta solución necesita tags thead y tbody dentro del elemento de table .

 table.tableSection { display: table; width: 100%; } table.tableSection thead, table.tableSection tbody { float: left; width: 100%; } table.tableSection tbody { overflow: auto; height: 150px; } table.tableSection tr { width: 100%; display: table; text-align: left; } table.tableSection th, table.tableSection td { width: 33%; } 

Violín de trabajo

Con comentarios

Nota : Si está seguro de que la barra de desplazamiento vertical siempre está presente, puede usar la propiedad css3 calc para hacer que las celdas de thead se alineen con las celdas de tbody.

 table.tableSection thead { padding-right:18px; /* 18px is approx. value of width of scroll bar */ width: calc(100% - 18px); } 

Puede hacer lo mismo detectando la presencia de la barra de desplazamiento usando javascript y aplicando los estilos anteriores.

En lugar de asumir como columnas de ancho fijo.

CSS

 table.tableSection { display: table; width: 100%; } table.tableSection thead, table.tableSection tbody { width: 100%; } table.tableSection thead { overflow-y: scroll; display: table; table-layout: fixed; width: calc(100% - 16px); /* assuming scrollbar width as 16px */ } table.tableSection tbody { overflow: auto; height: 150px; display: block; } table.tableSection tr { width: 100%; text-align: left; display: table; table-layout: fixed; } 

Fiddle de trabajo

Esta es la técnica que he usado en varias ocasiones. Originalmente se basa en este violín con una serie de modificaciones. También es fluido y los anchos de columna se pueden arreglar añadiendo un estilo de ancho al

.

 /* this is for the main container of the table, also sets the height of the fixed header row */ .headercontainer { position: relative; border: 1px solid #222; padding-top: 37px; background: #000; } /* this is for the data area that is scrollable */ .tablecontainer { overflow-y: auto; height: 200px; background: #fff; } /* remove default cell borders and ensures table width 100% of its container*/ .tablecontainer table { border-spacing: 0; width:100%; } /* add a thin border to the left of cells, but not the first */ .tablecontainer td + td { border-left:1px solid #eee; } /* cell padding and bottom border */ .tablecontainer td, th { border-bottom:1px solid #eee; padding: 10px; } /* make the default header height 0 and make text invisible */ .tablecontainer th { height: 0px; padding-top: 0; padding-bottom: 0; line-height: 0; visibility: hidden; white-space: nowrap; } /* reposition the divs in the header cells and place in the blank area of the headercontainer */ .tablecontainer th div{ visibility: visible; position: absolute; background: #000; color: #fff; padding: 9px 10px; top: 0; margin-left: -10px; line-height: normal; border-left: 1px solid #222; } /* prevent the left border from above appearing in first div header */ th:first-child div{ border: none; } /* alternate colors for rows */ .tablecontainer tbody tr:nth-child(even){ background-color: #ddd; } 
 
Table attribute name
Table attribute name
Value
Value
Description
Description
align left, center, right Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text
bgcolor rgb(x,x,x), #xxxxxx, colorname Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table
border 1,"" Specifies whether the table cells should have borders or not
cellpadding pixels Not supported in HTML5. Specifies the space between the cell wall and the cell content
cellspacing pixels Not supported in HTML5. Specifies the space between cells
frame void, above, below, hsides, lhs, rhs, vsides, box, border Not supported in HTML5. Specifies which parts of the outside borders that should be visible
rules none, groups, rows, cols, all Not supported in HTML5. Specifies which parts of the inside borders that should be visible
summary text Not supported in HTML5. Specifies a summary of the content of a table
width pixels, % Not supported in HTML5. Specifies the width of a table

Un año más o menos ha pasado desde que se hizo la pregunta, pero no estaba satisfecho con las respuestas. Estuve jugando un rato, y aquí hay un código que dice:

  • funciona en IE8 + y en todos los demás navegadores;
  • es muy fácil de entender;
  • alinea los bordes de la celda perfectamente (celdas de ancho fijo);
  • arregla la cabeza mientras el cuerpo se desplaza;
  • se adapta automáticamente a pantallas táctiles.

Demostración en vivo aquí: http://jsbin.com/bagaro/1/edit?html,output .

     Scrollabe table      

This table is scrollable

Name Operator Began operation Tonnage Status
Seabourne Sun Seabourn Cruise Line 1988 ? Ended service in 2002, currently operating as Prinsendam
Adventures of the Seas Royal Caribbean International 2001 138,000 Operating
Oceanic Independence American Hawaiian Cruises / American Global Line 1974 23,719 Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs
Cunard Ambassador Cunard Line 1972 14,160 Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.
Aegean Beauty Voyages to Antiquity 1973 11,563 Formerly Aegean Dolphin and Aegean I. Operating
Serenade of the Seas Royal Caribbean International 2003 90,090 Operating
Queen Elizabeth 2 Cunard Line 1969 70,327 Left fleet in November 2008
National Geographic Endeavour Lindblad Expeditions 1996 Operating, also known as Endeavour
Liberty of the Seas Royal Caribbean International 2007 154,407 Operating

usa esta tabla en un DIV

 
....
.tbl_container{ overflow:auto; width: 500px;height: 200px; }

y además de esto, si quieres hacerlo más hermoso y atractivo, utiliza el jscollpane para personalizar tu barra de desplazamiento.

HTML:

  

↓ SCROLL ↓

Colonne 1 Colonne 2 Colonne 3
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !

↓ SCROLL MORE ↓

Colonne 1 Colonne 2 Colonne 3
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !
Non Mais Allo !

↑ UP ↑

CSS:

 body{ font:1.2em normal Arial,sans-serif; color:#34495E; } h1{ text-align:center; text-transform:uppercase; letter-spacing:-2px; font-size:2.5em; margin:20px 0; } .container{ width:90%; margin:auto; } table{ border-collapse:collapse; width:100%; } .blue{ border:2px solid #1ABC9C; } .blue thead{ background:#1ABC9C; } .purple{ border:2px solid #9B59B6; } .purple thead{ background:#9B59B6; } thead{ color:white; } th,td{ text-align:center; padding:5px 0; } tbody tr:nth-child(even){ background:#ECF0F1; } tbody tr:hover{ background:#BDC3C7; color:#FFFFFF; } .fixed{ top:0; position:fixed; width:auto; display:none; border:none; } .scrollMore{ margin-top:600px; } .up{ cursor:pointer; } 

JS (jQuery):

 ;(function($) { $.fn.fixMe = function() { return this.each(function() { var $this = $(this), $t_fixed; function init() { $this.wrap('
'); $t_fixed = $this.clone(); $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this); resizeFixed(); } function resizeFixed() { $t_fixed.find("th").each(function(index) { $(this).css("width",$this.find("th").eq(index).outerWidth()+"px"); }); } function scrollFixed() { var offset = $(this).scrollTop(), tableOffsetTop = $this.offset().top, tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); if(offset < tableOffsetTop || offset > tableOffsetBottom) $t_fixed.hide(); else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) $t_fixed.show(); } $(window).resize(resizeFixed); $(window).scroll(scrollFixed); init(); }); }; })(jQuery); $(document).ready(function(){ $("table").fixMe(); $(".up").click(function() { $('html, body').animate({ scrollTop: 0 }, 2000); }); });

Para el progtwigdor principiante: si no desea descargar y hospedar jQuery usted mismo, puede incluirlo desde un CDN (Content Delivery Network).

    

Agregando jQuery a sus páginas web, haga clic aquí .

Referencia: AQUÍ

Usando flexboxes, no javascript, y es receptivo.

 /* styles */ table { font-family: sans-serif; border-collapse: collapse; max-height: 300px; overflow: auto; } td, th { border: 1px solid #ddd; text-align: left; padding: 8px; background: #fff; } tr:nth-child(odd) td { background-color: #eee; } /* fixed headers */ table, thead, tbody { display: block; } thead { position: sticky; top: 0; } tr { display: flex; } th, td { flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; } 
 

HTML Table

# Firstname Lastname Age City Country Sex Example Example ExampleReallyReallyLong Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Example Really Really Long ExampleReallyReallyLong Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes

Puede usar una clase de división con el atributo de desbordamiento utilizando el valor scroll. O puede encerrar la tabla dentro de un iframe. El iframe funciona bien con navegadores IE antiguos y nuevos, pero puede no funcionar con otros navegadores y probablemente no con el último IE.

  #myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ } .myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ } 
Content1
Content2
Content

La respuesta de @jogesh_pi es una buena solución, he creado un ejemplo aquí http://jsfiddle.net/pqgaS/5/ , compruébalo, espero que esto ayude

 
Data Data Data Data Data Data
#listtableWrapperScroll{ height:100px; width:460px; overflow-y:scroll; border:1px solid #777777; background:#FFFFF2; } #listtableWrapperScroll #listtable{ width:440px; } #listtableWrapperScroll #listtable tr td{ border-bottom:1px dashed #444; }

puedes intentar esto

CSS:

  #table-wrapper { height:150px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; color:#000; } #table-wrapper table thead th .text { position:fixed; top:0px; height:20px; width:35%; border:1px solid red; } 

HTML:

 
album song genre
album 0 song0 genre0
album 1 song 1 genre1
album2 song 2 genre2
album3 song 3 genre3
album4 song 4 genre 4
album5 song 5 genre 5
album 6 song6 genre6
album 7 song7 genre7
album8 song8 genre 8
album9 song9 genre9
album10 song 10 genre10
album11 song 11 genre11
album12 song12 genre12
album 13 song13 genre13
album14 song14 genre14
album15 song15 genre15
album 16 song16 genre16
album 17 song17 genre17
album18 song18 genre18
album19 song19 genre19
album20 song20 genre20

Mira este violín: http://jsfiddle.net/Kritika/GLKxB/1/

esto mantendrá fixed cabezal de la table y scroll solo el table content la table content .

     Scrollable Table    
URL
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw
http://www.youtube.com/embed/evuSpI2Genw

Mi solución más simple se basa en el diseño de columnas fijas . Tendrá que establecer el ancho de cada columna, por ejemplo: 4 columnas de 100 píxeles cada una es igual a 400 píxeles de ancho total.

 table { table-layout: fixed; width: 400px; } td, th { width: 100px; } 

El algoritmo de disposición de tabla fija tiene muchas ventajas sobre el algoritmo automático de disposición de tabla (por ejemplo: el diseño horizontal solo depende del ancho de la tabla y el ancho de las columnas, no el contenido de las celdas, permite que un navegador diseñe la tabla más rápido) que el diseño de la tabla automática, el navegador puede comenzar a mostrar la tabla una vez que se ha recibido la primera fila, etc.)

Luego, deberá separar el thead del tbody al forzar su estilo de visualización para block lugar de la table-* predeterminada- table-*

 thead tr { display: block; } tbody { display: block; height: 256px; overflow-y: auto; } 

Eso hará que el tbody pueda desplazar como una caja separada y el thead no relacionado con ella. Y esa es la razón principal por la que tuvo que arreglar el ancho de las columnas como se hizo arriba.

Trabajo JsFiddle: https://jsfiddle.net/angiolep/65q1gdcy/1/

Esta fue una pregunta desafiante. Creo que finalmente tengo una solución que cumple con los requisitos completos: una tabla dinámica desplazable vertical y horizontal (dinámica porque puede cambiar la cantidad de filas y columnas, y ninguna celda tiene ancho o altura fijos).

El diseño de HTML y CSS es bastante simple, como han mencionado otras personas. La cuestión clave es volver a calcular (ancho de celda de JavaScript). Y para asegurarme de que el desplazamiento horizontal funciona, también recalculo el ancho del cargador y el cuerpo tbody.

Aquí hay un violín https://jsfiddle.net/jmarcos00/6hv0dsj8/1/

Código HTML:

  
header one two header three header one two header three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three
one data two three one data two three

Código CSS:

 /* table border rule */ table, td, th { border: 1px solid black; } /* display as block plus display vertical scroll bars */ thead, tbody { display: block; overflow-y: scroll; } /* sample height */ tbody { height: 100px; } /* sample width and horizontal scroll bar */ div { width: 200px; overflow-x: auto; } 

Código de JavaScript:

 var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr; var th_rect, td_rect, theadtr_rect, tbodytr_rect; var safe = new Array(); // get thead and tbody var mythead = document.getElementById("mythead"); var mytbody = document.getElementById("mytbody"); // get first tr of thead and tbody theadtr = mythead.children[0]; tbodytr = mytbody.children[0]; theadtr_rect = theadtr.getBoundingClientRect(); tbodytr_rect = tbodytr.getBoundingClientRect(); // get width difference of longer first tr // difference between tr and parent if (tbodytr_rect.width > theadtr_rect.width) wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width; else wtot = mythead.getBoundingClientRect().width - theadtr_rect.width; // get width difference between tr and total th width (first step) thtot = theadtr_rect.width; // get th thead array and td tbody array theadtr = theadtr.children; tbodytr = tbodytr.children; // get loop for (i = 0; i < theadtr.length; i++) { // second step for width difference between tr and total th width th_rect = theadtr[i].getBoundingClientRect(); td_rect = tbodytr[i].getBoundingClientRect(); thtot -= th_rect.width; // get width of each th and first row td (without paddings etc) tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width")); thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width")); // get bigger width w = (tdw > thw) ? tdw : thw; safe.push(w); // add to width total (decimal value with paddings etc) w = (tdw > thw) ? td_rect.width : th_rect.width; wtot += w; } // consider tr width and total th width difference wtot += thtot; // set loop for (i = 0; i < theadtr.length; i++) { // set width to th and first row td w = safe[i] + "px"; theadtr[i].style.width = w; tbodytr[i].style.width = w; } // set width for thead and tbody wtot = wtot + "px"; mythead.style.width = wtot; mytbody.style.width = wtot; 

Primero probé la respuesta aceptada por el señor Green, pero descubrí que mis columnas no se alineaban, que flotaban: la izquierda parece muy sospechosa. Cuando pasé de no scollbar a scrollbar, mi cuerpo de tabla cambió algunos píxeles y perdí la alineación.

CÓDIGO PEN https://codepen.io/majorp/pen/gjrRMx

 CSS .width50px { width: 100px !important; } .width100px { width: 100px !important; } .fixed_headers { width: 100%; table-layout: fixed; border-collapse: collapse; } th { padding: 5px; text-align: left; font-weight:bold; height:50px; } td { padding: 5px; text-align: left; } thead, tr { display: block; position: relative; } tbody { display: block; overflow: auto; width: 100%; height: 500px; } .tableColumnHeader { height: 50px; font-weight: bold; } .lime { background-color: lime; }