Desplazamiento de la tabla con HTML y CSS

Primera solución

 
 
 
 
 
 
Header 1
 
Header 2
 
 
 
 
 
 
 
 
 
 
new item
 
new item
 
 
 
new item
 
new item
 
 
 
new item
 
new item
 
 
 
new item
 
new item
 
 
 
 
 
  

Resultado

Esto funciona en todos los navegadores

Demo jsfiddle http://jsfiddle.net/nyCKE/6302/

Segunda solución

Esto es específico de su Código solamente, pero podría tener un problema con IE9, así que sugeriría la primera solución.

 #products-table { width: 200px; height: 400px; overflow: auto; } 

O tabla con encabezado fijo

 tbody { width: 200px; height: 400px; overflow: auto; } 

Resultado

Demo jsfidle http://jsfiddle.net/nyCKE/7588/

Respuesta tardía, otra idea, pero muy breve.

1. poner la mesa en envoltura div
2. poner el contenido de las celdas de encabezado en div
3. arregla el contenido del encabezado, mira CSS

HTML

 
  ... many rows ... 
 
first col
second
 
foo
bar
  

CSS

 #scrolltable { margin-top: 20px; height: 200px; overflow: auto; } #scrolltable th div { position: absolute; margin-top: -20px; } 

prueba el violín

Funciona solo en Chrome, pero se puede adaptar a otros navegadores modernos. La tabla vuelve a la tabla común con la barra de desplazamiento en otros saldos. Utiliza la propiedad CSS3 FLEX.

http://jsfiddle.net/4SUP8/1/

 
 
Lista Sumnjivih vozila:
 
 
 
Opis Sumnje
 
Registarski
broj vozila
 
Datum
Vreme
 
Brzina
(km/h)
 
Lokacija
 
Status
 
Akcija
 
 
 
 
 
Osumnjičen tranzit
 
NS182TP
 
23-03-2014 20:48:08
 
11.3
 
Raskrsnica kod pumpe
 
 
Prikaz
 
 
 
 
Osumnjičen tranzit
 
NS182TP
 
23-03-2014 20:48:08
 
11.3
 
Raskrsnica kod pumpe
 
 
Prikaz
 
 
 
 
Osumnjičen tranzit
 
NS182TP
 
23-03-2014 20:48:08
 
11.3
 
Raskrsnica kod pumpe
 
 
Prikaz
 
 
 
 
Osumnjičen tranzit
 
NS182TP
 
23-03-2014 20:48:08
 
11.3
 
Raskrsnica kod pumpe
 
 
Prikaz
 
 
  

Estilo (CSS 3):

 caption { display: block; line-height: 3em; width: 100%; -webkit-align-items: stretch; border: 1px solid #eee; } .flexy { display: block; width: 90%; border: 1px solid #eee; max-height: 320px; overflow: auto; } .flexy thead { display: -webkit-flex; -webkit-flex-flow: row; } .flexy thead tr { padding-right: 15px; display: -webkit-flex; width: 100%; -webkit-align-items: stretch; } .flexy tbody { display: -webkit-flex; height: 100px; overflow: auto; -webkit-flex-flow: row wrap; } .flexy tbody tr{ display: -webkit-flex; width: 100%; } .flexy tr td { width: 15%; } 

Para aquellos que se preguntan cómo implementar la solución de Garry con más de un encabezado, este es:

 #wrapper { width: 235px; } table { border: 1px solid black; width: 100%; } th, td { width: 100px; border: 1px solid black; } thead>tr { position: relative; display: block; } tbody { display: block; height: 80px; overflow: auto; } 

 
 
 
 
 
column1
 
column2
 
 
 
 
 
row1
 
row1
 
 
 
row2
 
row2
 
 
 
row3
 
row3
 
 
 
row4
 
row4
 
 
 
  

Por lo que sea que valga ahora: aquí hay otra solución:

• crear dos divs dentro de una display: inline-block
• en el primer div, coloca una tabla con solo el encabezado ( tabhead tabla del tabhead )
• en el segundo div, pon una tabla con encabezado y datos (tabla de datos / tabla completa tabfull )
• use JavaScript, use setTimeout(() => {/*...*/}) para ejecutar el código después de renderizar / después de llenar la tabla con los resultados de fetch
• mida el ancho de cada th en la tabla de datos (usando clientWidth )
• aplicar el mismo ancho a la contraparte en la tabla de encabezado
• establecer la visibilidad del encabezado de la tabla de datos como oculta y establecer el margen superior en -1 * altura de la tabla de datos en los píxeles

Con algunos ajustes, este es el método a usar (por brevedad / simplicidad, utilicé d3js, las mismas operaciones se pueden hacer usando DOM simple):

 setTimeout(() => { // pass one cycle d3.select('#tabfull') .style('margin-top', (-1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height) + 'px') .select('thead') .style('visibility', 'hidden'); let widths=[]; // really rely on COMPUTED values d3.select('#tabfull').select('thead').selectAll('th') .each((n, i, nd) => widths.push(nd[i].clientWidth)); d3.select('#tabhead').select('thead').selectAll('th') .each((n, i, nd) => d3.select(nd[i]) .style('padding-right', 0) .style('padding-left', 0) .style('width', widths[i]+'px')); }) 

La espera en el ciclo de renderizado tiene la ventaja de utilizar el motor de diseño del navegador a lo largo del proceso, para cualquier tipo de encabezado; no está obligado a condiciones especiales o las longitudes del contenido de la celda son de alguna manera similares. También se ajusta correctamente para barras de desplazamiento visibles (como en Windows)

He puesto un codepen con un ejemplo completo aquí: https://codepen.io/sebredhh/pen/QmJvKy

Agrega un gradiente de desvanecimiento a un elemento de tabla HTML desbordado para indicar mejor que hay más contenido para desplazarse.

• Tabla con encabezado fijo
• Desbordamiento gradiente de desplazamiento
• Barra de desplazamiento personalizada

Vea el ejemplo en vivo a continuación:

 $("#scrolltable").html(""); $("#cell").append("
First col
Second col
"); for (var i = 0; i < 40; i++) { $("#scrolltable > table > tbody").append("" + "foo" + "" + "bar" + ""); } 

 /* Table with fixed header */ table, thead { width: 100%; text-align: left; } #scrolltable { margin-top: 50px; height: 120px; overflow: auto; width: 200px; } #scrolltable table { border-collapse: collapse; } #scrolltable tr:nth-child(even) { background: #EEE; } #scrolltable th div { position: absolute; margin-top: -30px; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } /* Overflow scroll gradient */ .overflow-scroll-gradient { position: relative; } .overflow-scroll-gradient::after { content: ''; position: absolute; bottom: 0; width: 240px; height: 25px; background: linear-gradient( rgba(255, 255, 255, 0.001), white); pointer-events: none; }