tbody - title html

Tabla de desplazamiento con HTML y CSS

Question

Tengo una tabla como esa que lleno con un dato.

<table id="products-table"  style="overflow-y:scroll" >
    <thead>
        <tr>
            <th>Product (Parent Product)</th> 
            <th>Associated Sites</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        { 
        <tr>
            <td>
                <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
            </td>
            <td>
                <span class="lesser"></span>
            </td>
            <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
                @Html.ActionLink("Associate Site", "Associate", "Products")
            </td>
         </tr>
        }
        <tr>
</tbody>
</table>

y CSS asi

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

pero el desplazamiento no funciona, quiero arreglar la altura de la tabla y, si la supera, trabajar con la barra de desplazamiento

Answer 1

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

• Mesa con cabecera fija
• Desbordamiento de gradiente de desplazamiento
• Barra de desplazamiento personalizada

Vea el ejemplo en vivo a continuación:

$("#scrolltable").html("<table id=''cell''><tbody></tbody></table>");
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");

for (var i = 0; i < 40; i++) {
  $("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-scroll-gradient">
  <div id="scrolltable">
  </div>
</div>

Answer 2

Este trabajo para mi

Demo: jsfiddle

$(function() 
{
    Fixed_Header();
});

function Fixed_Header()
{
    $(''.User_Table thead'').css({''position'': ''absolute''});
    $(''.User_Table tbody tr:eq("2") td'').each(function(index,e){
        $(''.User_Table thead tr th:eq("''+index+''")'').css({''width'' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $(''.User_Table thead'').outerHeight();
    $(''.User_Table thead'').css({''margin-top'' : "-"+Header_Height+"px"});
    $(''.User_Table'').css({''margin-top'' : Header_Height+"px"});
}

Answer 3

Funciona solo en Chrome pero puede adaptarse a otros navegadores modernos. La tabla vuelve a la tabla común con la barra de desplazamiento en otras ramas. Utiliza la propiedad CSS3 FLEX.

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

<table border="1px" class="flexy">
    <caption>Lista Sumnjivih vozila:</caption>
    <thead>
        <tr>
            <td>Opis Sumnje</td>
        <td>Registarski<br>broj vozila</td>
        <td>Datum<br>Vreme</td>
        <td>Brzina<br>(km/h)</td>
        <td>Lokacija</td>
        <td>Status</td>
        <td>Akcija</td>
        </tr>
    </thead>
    <tbody>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>


        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>

    </tbody>
</table>

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

Answer 4

Para aquellos que se preguntan cómo implementar la solución de Garry con más de un encabezado, esto 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;
}

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row1</td>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
        <td>row4</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 5

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

• crear dos divs dentro de una display: inline-block
• en el primer div, coloque una tabla con solo el encabezado (encabezado tabla tabhead )
• en la segunda división, coloque una tabla con encabezado y datos (tabla de datos / tabla completa tabfull )
• use JavaScript, use setTimeout(() => {/*...*/}) para ejecutar el código después del procesamiento / después de llenar la tabla con los resultados de la 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
• establezca la visibilidad del encabezado de la tabla de datos como oculta y establezca el margen superior a -1 * altura de los píxeles de la tabla de datos thead

Con algunos ajustes, este es el método a utilizar (para mayor brevedad / simplicidad, usé 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 procesamiento tiene la ventaja de utilizar el motor de diseño del navegador durante todo el proceso, para cualquier tipo de encabezado; no está limitado a que las longitudes de las condiciones especiales o el contenido de las celdas sean 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

Answer 6

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

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

HTML

<div id="scrolltable">
    <table>
        <tr><th><div>first col</div></th><th><div>second</div></th></tr>
        <tr><td>foo</td><td>bar</td></tr>
        ... many rows ...
    </table>
</div>

CSS

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

prueba el violín

Answer 7

Primera solucion

<table cellspacing="0" cellpadding="0" border="0" width="325">
 <tr>
  <td>
   <table cellspacing="0" cellpadding="1" border="1" width="300" >
     <tr style="color:white;background-color:grey">
        <th>Header 1</th>
        <th>Header 2</th>
     </tr>
   </table>
  </td>
 </tr>
<tr>
<td>
   <div style="width:320px; height:60px; overflow:auto;">
     <table cellspacing="0" cellpadding="1" border="1" width="300" >
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
          <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
          <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>   
     </table>  
   </div>
  </td>
 </tr>
</table>

Resultado

Esto está funcionando en todos los navegadores.

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

Segunda solucion

Esto es específico solo para su Código, pero podría tener un problema con IE9, por lo que sugeriría primero la 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/

Answer 8

<div style="overflow:auto">
    <table id="table2"></table>
</div>

Pruebe este código para la tabla de desbordamiento que funcionará solo en la etiqueta div