{"id":7737,"date":"2022-04-19T06:15:33","date_gmt":"2022-04-19T06:15:33","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7737"},"modified":"2022-04-19T06:15:33","modified_gmt":"2022-04-19T06:15:33","slug":"tabla-con-cabecera-fija-solo-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/","title":{"rendered":"Tabla con cabecera fija solo con CSS"},"content":{"rendered":"<p>Hoy en d\u00eda, <strong>CSS<\/strong> ha evolucionado mucho. Con la llegada de <strong>CSS3<\/strong> se pueden crear m\u00e1s estructuras y\/o dise\u00f1os mucho m\u00e1s f\u00e1cil que antes.<\/p>\n<p>Por ejemplo, para mi siempre ha sido muy \u00fatil que una tabla con muchos datos, tenga una cabecera fija que te siga con el scroll para no perder la referencia del significado de las columnas.<\/p>\n<p>Antiguamente, har\u00e1 unos 10 a\u00f1os, era bastante complicado conseguir este efecto.<\/p>\n<p>Incluso, algunos programadores crearon plugins con JavaScript para conseguir una tabla con cabecera fija.<\/p>\n<p>Pues bien, en las hojas de estilos en cascada ahora puedes agregar un posicionamiento con valor \u00absticky\u00bb justamente para permitirte conseguir elementos fijos en la pantalla aunque la barra de scroll sea desplazada.<\/p>\n<p>En este art\u00edculo vas a descubrir como crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para mantenerla siempre visible.<\/p>\n<h2>Estructura HTML de la tabla<\/h2>\n<p>En el ejemplo en funcionamiento ver\u00e1s una tabla con todos sus elementos principales:<\/p>\n<ul>\n<li>Cabecera &lt;thead&gt;<\/li>\n<li>Cuerpo &lt;tbody&gt;<\/li>\n<li>Pie de tabla &lt;tfoot&gt;<\/li>\n<\/ul>\n<p>Tal y como puedes observar a continuaci\u00f3n:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/table.html\"><span class=\"kw2\">table<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/thead.html\"><span class=\"kw2\">thead<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>Nombre<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>Apellidos<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>Edad<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>N\u00f3mina<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/thead.html\"><span class=\"kw2\">thead<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tbody.html\"><span class=\"kw2\">tbody<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Lorem<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Ipsum<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>56<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>2.560\u20ac<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Lorem<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Ipsum<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>56<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>2.560\u20ac<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Lorem<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>Ipsum<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>56<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>2.560\u20ac<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/td.html\"><span class=\"kw2\">td<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n        ...\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tbody.html\"><span class=\"kw2\">tbody<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tfoot.html\"><span class=\"kw2\">tfoot<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a> <span class=\"kw3\">colspan<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;3&quot;<\/span>&gt;<\/span>Total<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text-center&quot;<\/span>&gt;<\/span>7.680 \u20ac<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/th.html\"><span class=\"kw2\">th<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tr.html\"><span class=\"kw2\">tr<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/tfoot.html\"><span class=\"kw2\">tfoot<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/table.html\"><span class=\"kw2\">table<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>La idea es tener una tabla con muchas filas.<\/p>\n<p>En la ilustraci\u00f3n anterior te dar\u00e1s cuenta que tan solo hay 3 elementos y puntos suspensivos.<\/p>\n<p>Te lo dejo as\u00ed para que no ocupe demasiado el c\u00f3digo de ejemplo.<\/p>\n<p>La idea es que tu lo rellenes con m\u00e1s datos.<\/p>\n<h2>Estilos generales de la tabla<\/h2>\n<p>Definir el dise\u00f1o general de tu tabla lo dejar\u00e9 a tu aire.<\/p>\n<p>Puedes copiar literalmente los estilos del c\u00f3digo del ejemplo en funcionamiento pero, si no tienes ni idea de como maquetar la tabla de forma general, puedes darle un vistazo al siguiente tutorial:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/tablas-con-css\/\" target=\"_blank\" rel=\"noopener\">Tablas con CSS<\/a><\/p>\n<h2>Posicionamiento fijo a la cabecera de la tabla<\/h2>\n<p>Para que tu tabla tenga una cabecera fija tan solo tienes que agregar los siguientes estilos a la etiqueta &lt;thead&gt; de tu tabla.<\/p>\n<p>Algo como lo que sigue a continuaci\u00f3n:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"css\" style=\"font-family:monospace;\">thead <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">position<\/span><span class=\"sy0\">:<\/span> sticky<span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">top<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>Un elemento posicionado fijamente es un elemento cuyo valor de position computado es sticky.<\/p>\n<p>Este elemento es tratado como un elemento posicionado relativamente hasta que su bloque contenedor cruza un l\u00edmite establecido (como por ejemplo dando a top cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como \u00abfijo\u00bb hasta que alcance el borde opuesto de su bloque contenedor.<\/p>\n<p>En este caso, me interesa definir un top con valor 0 para que cuando la cabecera de la tabla llegue a la posici\u00f3n 0 del view port, haciendo scroll, se aplique el efecto.<\/p>\n<h2>Conclusiones<\/h2>\n<p>Gracias a dios, el lenguaje <strong>CSS<\/strong> ha evolucionado mucho y las nuevas generaciones lo tienen m\u00e1s f\u00e1cil para conseguir dise\u00f1os m\u00e1s atractivos y usables con menos esfuerzo.<\/p>\n<p>Crear tablas con cabecera fija f\u00e1cilmente es una de las muchas posibilidades que se pueden hacer gracias a <strong>CSS3<\/strong>.<\/p>\n<p>\u00bfConoc\u00edas esta propiedad? \u00bfLo usas en tus proyectos?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.<\/p>\n","protected":false},"author":1,"featured_media":7738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[69],"class_list":["post-7737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-tablas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tabla con cabecera fija solo con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabla con cabecera fija solo con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-19T06:15:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/\",\"name\":\"Tabla con cabecera fija solo con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png\",\"datePublished\":\"2022-04-19T06:15:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png\",\"width\":500,\"height\":500,\"caption\":\"Tabla con cabecera fija solo con CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tabla con cabecera fija solo con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabla con cabecera fija solo con CSS - Jose Aguilar Blog","description":"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Tabla con cabecera fija solo con CSS - Jose Aguilar Blog","og_description":"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-04-19T06:15:33+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/","name":"Tabla con cabecera fija solo con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png","datePublished":"2022-04-19T06:15:33+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre lo f\u00e1cil que es crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para estar siempre visible.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Tabla-con-cabecera-fija-solo-con-CSS.png","width":500,"height":500,"caption":"Tabla con cabecera fija solo con CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/tabla-con-cabecera-fija-solo-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tabla con cabecera fija solo con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7737"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7738"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}