tablas - inmovilizar filas y columnas tabla html jquery

Congele la fila superior solo para una tabla html(Desplazamiento de encabezado de tabla fijo)

Question

Quiero hacer una tabla html con la fila superior congelada (para que cuando te desplaces verticalmente siempre puedas verla).

¿Hay alguna forma inteligente de que esto ocurra sin javascript?

Tenga en cuenta que NO necesito congelar la columna izquierda.

Answer 1

El plugin de jquery de Chromatable permite un encabezado fijo (o una fila superior) con anchos que permiten porcentajes, concedidos, solo un porcentaje del 100%.

http://www.chromaloop.com/posts/chromatable-jquery-plugin

No puedo pensar en cómo podrías hacer esto sin javascript.

actualización: nuevo enlace -> http://www.jquery-plugins.info/chromatable-00012248.htm

Answer 2

Es posible usar la position:fixed en <th> ( <th> siendo la fila superior).

Aquí hay un ejemplo

Answer 3

Esto se llama Desplazamiento de encabezado fijo. Hay una serie de enfoques documentados:

http://www.imaputz.com/cssStuff/bigFourVersion.html

http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/

http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/

No logrará esto de manera efectiva sin javascript ... especialmente si desea soporte de navegador cruzado.

Hay una serie de gotchyas con cualquier enfoque que tome, especialmente con respecto al soporte de navegador cruzado / versión.

Editar:

Incluso si no es el encabezado que desea corregir, sino la primera fila de datos, el concepto sigue siendo el mismo. No era el 100% al que te estabas refiriendo.

Pensé que mi compañía me había encargado que investigara una solución para esto que pudiera funcionar en IE7 +, Firefox y Chrome.

Después de muchas lunas de búsqueda, prueba y frustración, todo se redujo a un problema fundamental. En su mayor parte, para obtener el encabezado fijo, debe implementar columnas de altura / ancho fijas porque la mayoría de las soluciones implica el uso de dos tablas separadas, una para el encabezado que flotará y permanecerá en su lugar sobre la segunda tabla que contiene los datos .

//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>

Otra forma de intentarlo es utilizar las etiquetas tbody y thead, pero también tiene fallas porque IE no te permitirá colocar una barra de desplazamiento en el tbody, lo que significa que no puedes limitar su altura (tan estúpida IMO).

<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>

Este enfoque tiene muchos problemas, como asegurar anchos de píxeles EXACTOS, porque las tablas son tan lindas porque diferentes navegadores asignan píxeles de manera diferente según los cálculos y simplemente NO PUEDES (AFAIK) garantizar que la distribución sea perfecta en todos los casos. Se vuelve notoriamente obvio si tienes fronteras dentro de tu mesa.

Tomé un enfoque diferente y dije las tablas de tornillos ya que no puedes hacer esta garantía. Usé divs para imitar tablas. Esto también tiene problemas para posicionar las filas y las columnas (principalmente porque las cuestiones flotantes tienen problemas, el uso de bloque en línea no funcionará para IE7, así que realmente me dejo con el uso del posicionamiento absoluto para colocarlo en su lugar).

Hay alguien que hizo Slick Grid que tiene un enfoque muy similar al mío y puedes usar un buen ejemplo (aunque complejo) para lograrlo.

https://github.com/6pac/SlickGrid/wiki

Answer 4

Mi preocupación no era tener las celdas con ancho fijo. Lo cual parecía no funcionar en ningún caso. Encontré esta solución que parece ser lo que necesito. Lo estoy publicando aquí para otros que están buscando una forma. Mira este fiddle

Fragmento de trabajo:

html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}

<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<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>
</section>

Answer 5

Según http://www.imaputz.com/cssStuff/bigFourVersion.html , escribí una DEMO para arreglar fácilmente el encabezado al establecer overflow:auto para el tbody.

table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}

Answer 6

Usando el estilo css cebra

Copie y pegue este ejemplo y vea el encabezado corregido.

 <style>
.zebra tr:nth-child(odd){
background:white;
color:black;
}
.zebra tr:nth-child(even){
background: grey;
color:black;
}
.zebra tr:nth-child(1) {
background:black;
color:yellow;
position: fixed;
margin:-30px 0px 0px 0px;
}
</style>
<DIV id= "stripped_div"
class= "zebra"
style = "
border:solid 1px red;
height:15px;
width:200px;
overflow-x:none;
overflow-y:scroll;
padding:30px 0px 0px 0px;"
>
<table>
<tr >
<td>Name:</td>
<td>Age:</td>
</tr>
<tr >
<td>Peter</td>
<td>10</td>
</tr>
</table>
</DIV>

Observe que el relleno superior de 30px en el div deja espacio utilizado por la 1ra fila de datos eliminados, es decir tr: nth-child (1) que es "posición fija" y formateado con un margen de -30px

Answer 7

Yo uso esto:

tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}

Defino el ancho de las columnas con bootstrap css col-md-xx. Sin definir el ancho de las columnas, el ancho automático de la no coincide con. El 102% por ciento es porque pierdes algo de sapce con el desbordamiento

Answer 8

puedes usar dos divs uno para los encabezados y el otro para la tabla. luego usa

#headings {
position: fixed;
top: 0px;
width: 960px;
}

como @ptriek dijo que esto solo funcionaría para columnas de ancho fijo.