tablas sencillo plantillas para hojas estilos estilo ejemplos diseƱo descargar clases css google-chrome sass

sencillo - hojas de estilo css para tablas



Encabezados de tablas pegajosas solo para CSS en Chrome (3)

Para alguien que todavía está buscando una solución y no está satisfecho con la aceptada.

1) Use la clase superior pegajosa en el elemento th.

2) Con clase propia.

th.sticky-header { position: sticky; top: 0; z-index: 10; #To not have transparent background. #background-color: white; } <table class="table"> <thead> <tr> <th class="sticky-header">1</th> <th class="sticky-header">2</th> <th class="sticky-header">3</th> <th class="sticky-header">4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>

Tengo el siguiente fragmento de Sass en el que quiero que el <thead> flote a medida que la tabla se desplaza. Esto funciona correctamente en Safari, pero no en Chrome Version 58.0.3029.110 (64-bit) .

Sé que Chrome ha tenido soporte on-again-off-again para sticky , y actualmente lo admite, pero ¿es definitivo? ¿Es este un error de Chrome o necesito una solución diferente? (Prefiero el enfoque CSS en lugar de Javascript porque es más eficaz).

.table { thead { background: white; position: sticky; top: 0; z-index: 10; } }


posición: sticky no funciona con algunos elementos de la tabla (thead / tr) en Chrome. Puede mover pegajoso a tds / ths de tr que necesita para ser pegajoso. Me gusta esto:

.table { thead tr:nth-child(1) th{ background: white; position: sticky; top: 0; z-index: 10; } }

También esto funcionará.

.table { position: sticky; top: 0; z-index: 10; }

Puede mover el encabezado a un diseño separado. Por ejemplo:

<table class="table"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </thead> </table> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>


https://jsfiddle.net/y9cwnb81/4/

div.table { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: "header header header" "content content content"; } .header { grid: 1fr/1fr; } .content { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-area: content; height: 200px; overflow-y: scroll; } .content div { grid: auto-flow 1fr / repeat(auto-fill); } <!-- Here is the table code --> <div class="table"> <div class="header">Name</div> <div class="header">Color</div> <div class="header">Description</div> <div class="content"> <div>Apple</div> <div>Red</div> <div>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> <div>Apple</div> <div>Red</div> <div>These are red asd.</div> </div> </div>

Aquí hay un ejemplo que usa CSS GRID para tener encabezados pegajosos solo con CSS, no se requiere javascript.