Desplazamiento de la tabla con HTML y CSS

Tengo una mesa como esa que llevo con una información

 @for (int i = 0; i < Model.Count(); i++) {  } 
Product (Parent Product) Associated Sites Actions
@Model.ElementAt(i).Name
@Html.ActionLink("https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css/Edit Product", "https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css/Edit", "Products")
@Html.ActionLink("Associate Site", "Associate", "Products")

y CSS así

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

pero el scroll no funciona, quiero arreglar la altura de la tabla y si se supera, entonces trabajo con la barra de desplazamiento

Primera solución

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

Resultado

Imagen de demostración

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

Manifestación

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
foobar

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; }