Congelar la fila superior solo para una tabla html (desplazamiento fijo del encabezado de la tabla)
Quiero hacer una tabla html con la fila superior congelada (para que cuando te desplaces hacia abajo verticalmente siempre puedas verla).
¿Existe una forma inteligente de hacer que esto suceda sin JavaScript?
Tenga en cuenta que NO necesito congelar la columna de la izquierda.
Sé que esto tiene varias respuestas, pero ninguna de ellas realmente me ayudó. Encontré este artículo que explica por qué mi sistema stickyno funcionaba como se esperaba.
Básicamente, no puedes usar position: sticky;elementos <thead>o <tr>. Sin embargo, se pueden utilizar en <th>.
El código mínimo que necesitaba para que funcione es el siguiente:
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
Con la tabla configurada en relativa, se <th>puede configurar como fija, con la parte superior en 0
NOTA: Es necesario envolver la tabla con un div con altura máxima:
<div id="managerTable" >
...
</div>
dónde:
#managerTable {
max-height: 500px;
overflow: auto;
}
Esto se llama desplazamiento de encabezado fijo. Hay varios enfoques documentados:
http://www.imaputz.com/cssStuff/bigFourVersion.html
No podrá lograr esto de manera efectiva sin JavaScript... especialmente si desea compatibilidad con varios navegadores.
Hay una serie de problemas con cualquier enfoque que adopte, especialmente en lo que respecta al soporte entre navegadores y versiones.
Editar:
Incluso si no es el encabezado lo que desea corregir, sino la primera fila de datos, el concepto sigue siendo el mismo. No estaba al 100% a lo que te referías.
Pensé adicionalmente que mi empresa me encargó que investigara una solución para esto que pudiera funcionar en IE7+, Firefox y Chrome.
Después de muchas lunas de búsqueda, intentos y frustración, todo se redujo a un problema fundamental. En su mayor parte, para obtener el encabezado fijo, debe implementar columnas de alto/ancho fijo porque la mayoría de las soluciones implican 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>
Un enfoque alternativo que algunos intentan es utilizar las etiquetas tbody y thead, pero eso también es defectuoso porque IE no le permitirá colocar una barra de desplazamiento en tbody, lo que significa que no puede limitar su altura (qué estúpido en mi opinión).
<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 garantizar anchos de píxeles EXACTOS porque las tablas son tan lindas que diferentes navegadores asignarán píxeles de manera diferente según los cálculos y simplemente NO PUEDE (AFAIK) garantizar que la distribución será perfecta en todos los casos. Se vuelve notoriamente obvio si tienes límites dentro de tu mesa.
Tomé un enfoque diferente y dije tablas de tornillos ya que no se puede ofrecer esta garantía. Usé divs para imitar tablas. Esto también tiene problemas de posicionamiento de las filas y columnas (principalmente porque la flotación tiene problemas, usar el bloque en línea no funcionará para IE7, por lo que realmente me dejó usar el posicionamiento absoluto para colocarlos en sus lugares adecuados).
Hay alguien que creó Slick Grid que tiene un enfoque muy similar al mío y que puedes usar como un buen ejemplo (aunque complejo) para lograrlo.
https://github.com/6pac/SlickGrid/wiki
De acuerdo con Pure CSS Scrollable Table with Fixed Header , escribí una DEMO para arreglar fácilmente el encabezado configurándolo overflow:autoen 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
}
Mi preocupación era no tener celdas con un 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 manera. Mira este violín
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>
Puedes usar CSS position: sticky;para la primera fila de la tabla
MDN ref:
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
