css - poner - tablas en html5
¿Cómo agregar una barra de desplazamiento a una tabla HTML5? (14)
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:
<table id="my_table" table border="5">
<tr>
<th>URL</th>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
</table>
Aquí está mi código CSS:
#my_table {
border-radius: 20px;
background-color: transparent;
color: black;
width: 500px;
text-align: center;
}
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;
}
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 <th> .
/* 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;
}
<div class="headercontainer">
<div class="tablecontainer">
<table>
<thead>
<tr>
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
También como un JSFiddle
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:
<!--
thead and tbody have identifiers
table is inside a div container
-->
<div>
<table>
<thead id="mythead">
<tr>
<th>header one</th>
<th>two</th>
<th>header three</th>
<th>header one</th>
<th>two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
</tbody>
</table>
</div>
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;
HTML:
<h1>↓ SCROLL ↓</h1>
<table class="blue">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
</tbody>
</table>
<h1 class="scrollMore">↓ SCROLL MORE ↓</h1>
<table class="purple">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
</tbody>
</table>
<h1 class="up scrollMore">↑ UP ↑</h1>
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(''<div class="container" />'');
$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 programador principiante: si no desea descargar y hospedar jQuery usted mismo, puede incluirlo desde un CDN (Content Delivery Network).
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
Agregando jQuery a sus páginas web, haga clic aquí .
Referencia: HERE
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
<div id="listtableWrapperScroll">
<table id="listtable">
<tr>
<td>Data Data</td>
<td>Data Data</td>
<td>Data Data</td>
</tr>
</table>
</div>
#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;
}
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/
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;
}
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 */ }
<div class="myid">
<div class="row">Content1</div>
<div class="row2">Content2</div>
</div>
<table id="myid"><tr><td>Content</td></tr></table>
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 etiquetas 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%;
}
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.
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 .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollabe table</title>
<!-- Substantially simplified and improved version of the table on
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html -->
<script>
if (''ontouchstart'' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
document.documentElement.className += '' touchScreen'';
}
</script>
<style>
/* BASICS: */
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* in case block elements are used inside table cells */
}
html {
font-size: 62.5%; /* standardizes older IEs */
}
body {
font: normal 1.3em Verdana; /* = 13px */
}
table {
border-collapse: collapse;
table-layout: fixed;
empty-cells: show;
}
td {
border: 1px solid black;
padding: 4px;
}
/* SCROLL TABLE ESSENTIALS (+ SOME ADDITIONAL CSS): */
div#scrollTableContainer {
width: 617px;
margin: 40px; /* just for presentation purposes */
border: 1px solid black;
}
.touchScreen div#scrollTableContainer {
width: 600px; /* touch devices do not form scrollbars (= 17 px wide) */
}
#tHeadContainer {
background: #CC3600;
color: white;
font-weight: bold;
}
#tBodyContainer {
height: 240px;
overflow-y: scroll;
}
.touchScreen #tBodyContainer {
-webkit-overflow-scrolling: touch; /* smooths scrolling on touch screens */
}
/* FINER LAYOUT MATTERS: */
tr:first-child td {
border-top: 0;
}
#tBody tr.lastRow td {
border-bottom: 0;
}
td:first-child {
min-width: 108px; /* Firefox needs min- and max-widths */
max-width: 108px;
border-left: 0;
}
td:first-child + td {
min-width: 125px;
max-width: 125px;
}
td:first-child + td + td {
min-width: 90px;
max-width: 90px;
}
td:first-child + td + td + td {
min-width: 95px;
max-width: 95px;
}
td:first-child + td + td + td + td {
width: 180px; /* here, Firefox messes up with only min- and max-widths */
border-right: 0;
}
/* AND SOME CSS TO INFORM TOUCH SCREEN USERS: */
p#touchDeviceText {
display: none;
}
.touchScreen p#touchDeviceText {
display: block;
}
</style>
</head>
<body>
<p id="touchDeviceText">This table is scrollable</p>
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table id="tHead">
<tr>
<td>Name</td>
<td>Operator</td>
<td>Began operation</td>
<td>Tonnage</td>
<td>Status</td>
</tr>
</table>
</div><!-- tHeadContainer -->
<div id="tBodyContainer">
<table id="tBody">
<tr>
<td>Seabourne Sun</td>
<td>Seabourn Cruise Line</td>
<td>1988</td>
<td>?</td>
<td>Ended service in 2002, currently operating as Prinsendam</td>
</tr>
<tr>
<td>Adventures of the Seas</td>
<td>Royal Caribbean International</td>
<td>2001</td>
<td>138,000</td>
<td>Operating</td>
</tr>
<tr>
<td>Oceanic Independence</td>
<td>American Hawaiian Cruises / American Global Line</td>
<td>1974</td>
<td>23,719</td>
<td>Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td>
</tr>
<tr>
<td>Cunard Ambassador</td>
<td>Cunard Line</td>
<td>1972</td>
<td>14,160</td>
<td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
</tr>
<tr>
<td>Aegean Beauty</td>
<td>Voyages to Antiquity</td>
<td>1973</td>
<td>11,563</td>
<td>Formerly Aegean Dolphin and Aegean I. Operating</td>
</tr>
<tr>
<td>Serenade of the Seas</td>
<td>Royal Caribbean International</td>
<td>2003</td>
<td>90,090</td>
<td>Operating</td>
</tr>
<tr>
<td>Queen Elizabeth 2</td>
<td>Cunard Line</td>
<td>1969</td>
<td>70,327</td>
<td>Left fleet in November 2008</td>
</tr>
<tr>
<td>National Geographic Endeavour</td>
<td>Lindblad Expeditions</td>
<td>1996</td>
<td></td>
<td>Operating, also known as Endeavour</td>
</tr>
<tr class="lastRow">
<td>Liberty of the Seas</td>
<td>Royal Caribbean International</td>
<td>2007</td>
<td>154,407</td>
<td>Operating</td>
</tr>
</table>
</div><!-- tBodyContainer -->
</div><!-- scrollTableContainer -->
</body>
</html>
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;
}
<h2>HTML Table</h2>
<div class=wrap>
<table>
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>ExampleReallyReallyLong</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Example Really Really Long</td>
<td>ExampleReallyReallyLong</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
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:
<div id="table-wrapper">
<table>
<thead>
<tr>
<th><span class="text">album</span></th>
<th><span class="text">song</span></th>
<th><span class="text">genre</span></th>
</tr>
</thead>
<tbody>
<tr> <td> album 0</td> <td> song0</td> <td> genre0</td> </tr>
<tr> <td>album 1</td> <td>song 1</td> <td> genre1</td> </tr>
<tr> <td> album2</td> <td>song 2</td> <td> genre2</td> </tr>
<tr> <td> album3</td> <td>song 3</td> <td> genre3</td> </tr>
<tr> <td> album4</td> <td>song 4</td> <td>genre 4</td> </tr>
<tr> <td> album5</td> <td>song 5</td> <td>genre 5</td> </tr>
<tr> <td>album 6</td> <td> song6</td> <td> genre6</td> </tr>
<tr> <td>album 7</td> <td> song7</td> <td> genre7</td> </tr>
<tr> <td> album8</td> <td> song8</td> <td>genre 8</td> </tr>
<tr> <td> album9</td> <td> song9</td> <td> genre9</td> </tr>
<tr> <td> album10</td> <td>song 10</td> <td> genre10</td> </tr>
<tr> <td> album11</td> <td>song 11</td> <td> genre11</td> </tr>
<tr> <td> album12</td> <td> song12</td> <td> genre12</td> </tr>
<tr> <td>album 13</td> <td> song13</td> <td> genre13</td> </tr>
<tr> <td> album14</td> <td> song14</td> <td> genre14</td> </tr>
<tr> <td> album15</td> <td> song15</td> <td> genre15</td> </tr>
<tr> <td>album 16</td> <td> song16</td> <td> genre16</td> </tr>
<tr> <td>album 17</td> <td> song17</td> <td> genre17</td> </tr>
<tr> <td> album18</td> <td> song18</td> <td> genre18</td> </tr>
<tr> <td> album19</td> <td> song19</td> <td> genre19</td> </tr>
<tr> <td> album20</td> <td> song20</td> <td> genre20</td> </tr>
</tbody>
</table>
</div>
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 .
usa esta tabla en un DIV
<div class="tbl_container">
<table> .... </table>
</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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scrollable Table</title>
<style type="text/css">
* { padding: 0; margin: 0; }
table.my_table {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 283px;
}
table.my_table th, table.my_table td {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
table.my_table th { background: #ffb; }
table.my_table td { background: #ffe; }
div.scrollableContainer {
height: 100px;
overflow: auto;
width: 300px;
margin: 40px;
border: 1px solid #999;
background: #ffb;
}
</style>
</head>
<body>
<div class="scrollableContainer">
<table class="my_table scrollable">
<thead>
<tr>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>