Tengo la siguiente tabla: La filas se desplegan o se ocultan haciendo uso de los iconos de la primera columna (marcados en verde) Necesito fijar tanto esa primera columna (Tiendas) como la cabecera de la tabla. [![bien][1]][1] Buscando encontré un código de boostrap que me funcionó al primer intento, https://codepen.io/yavuzselim/pen/LNYrBd Luego ya no funcionó, el navegador ni siquiera lee la clase .table-fixed, en un segundo intento me arroja de error que el estilo estaba mal formado o algo así, ahora no lo "ve". <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .table-fixed{ width: 100%; background-color: #f3f3f3; tbody{ height:200px; overflow-y:auto; width: 100%; } thead,tbody,tr,td,th{ display:block; } tbody{ td{ float:left; } } thead { tr{ th{ float:left; background-color: #f39c12; border-color:#e67e22; } } } } <!-- end snippet --> Lo modifiqué por: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .table-fixed{ width: 100% !important; background-color: #f3f3f3; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td{ float:left; } <!-- end snippet --> Y fue peor porque la tabla se deforma toda y me da lo que se ve en ésta segunda imagen. Alguien puede ayudarme. [![tabla mal formada][2]][2] [1]: https://i.sstatic.net/naIHt.png [2]: https://i.sstatic.net/obzN2.png Encontré éste código que me funciona para fijar la cabecera: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> <script type="text/javascript"> function fnc() { document.getElementById('table-scroll').onscroll = function() { document.getElementById('fixedY').style.top = document.getElementById('table-scroll').scrollTop + 'px'; document.getElementById('fixedX').style.left = document.getElementById('table-scroll').scrollLeft + 'px'; }; document.getElementById('corner').style.width = document.getElementById('fixedX').offsetWidth -4 + "px"; } window.onload = fnc; </script> <!-- language: lang-css --> <style type="text/css"> #table-scroll { width: 500px; height: 100px; overflow: auto; } table, td, th { border: rgba(193, 193, 193, 0.48) 1px solid; } #fixedY{ position: relative; top: 0; z-index: 99; background-color: red; } #fixedY table{ border-collapse: collapse; width: 900px; } #fixedY table th, #fixedY table td { width: 25%; } #fixedY table th { background-color: red; font: bold 15px Tahoma, Geneva, sans-serif; color: rgb(255, 255, 255); } #cuerpoDatos { width: 900px; overflow: hidden; } #cuerpoDatos > div{ float: left; } #cuerpoDatos > div#fixedX{ width: 25%; position: relative; left: 0; z-index: 98; background-color: yellow; } #cuerpoDatos > div#fixedX table{ border-collapse: collapse; width: 100%; } #cuerpoDatos > div#nofixedX{ width: 75%; } #cuerpoDatos > div#nofixedX table{ border-collapse: collapse; width: 100%; } #cuerpoDatos > div#nofixedX table td { width: 33%; } #corner{ font: bold 15px/120% Tahoma, Geneva, sans-serif; text-align: center; border: orange 2px solid; background-color: orange; position: fixed; top: default; margin-top: -1.5em; z-index: 2147483647; } </style> <!-- language: lang-html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <div id="table-scroll"> <div id="fixedY"> <table> <thead> <tr> <th>Lote</th><th>Producto 1</th><th>Producto 2</th><th>Producto 3</th> </tr> </thead> </table> </div> <div id="cuerpoDatos"> <div id="corner"> ☺ </div> <div id="fixedX"> <table> <tbody> <tr> <td>Viaje 1</td> </tr> <tr> <td>Viaje 2</td> </tr> <tr> <td>Viaje 3</td> </tr> <tr> <td>Viaje 4</td> </tr> <tr> <td>Viaje 5</td> </tr> <tr> <td>Viaje 6</td> </tr> <tr> <td>Viaje 7</td> </tr> <tr> <td>Viaje 8</td> </tr> <tr> <td>Viaje 9</td> </tr> </tbody> </table> </div> <div id="nofixedX"> <table> <tbody> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> <tr> <td>moto</td><td>avión</td><td>barco</td> </tr> </tbody> </table> </div> </div> </div> </body> </html> <!-- end snippet --> Pero no me funciona para fijar la fila, cómo hacer qué #cuerpoDatos > div#fixedX{ width: 25%; position: relative; left: 0; z-index: 98; background-color: yellow; } #cuerpoDatos > div#fixedX table{ border-collapse: collapse; width: 100%; } sea aplicable a un td dentro de la tabla, ya que no me funciona como está porque la tabla crece dinámicamente.