{"id":15737,"date":"2024-03-07T13:34:24","date_gmt":"2024-03-07T16:34:24","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15737"},"modified":"2024-03-07T14:11:29","modified_gmt":"2024-03-07T17:11:29","slug":"html-como-criar-uma-tabela-com-titulo-fixo-e-barra-de-rolagem-no-restante","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15737","title":{"rendered":"HTML: Como Criar uma Tabela com T\u00edtulo fixo e Barra de Rolagem no Restante?"},"content":{"rendered":"\n

Criar uma tabela com t\u00edtulo fixo e barra de rolagem no restante \u00e9 importante e vantajoso em diversas situa\u00e7\u00f5es, especialmente quando lidamos com conjuntos extensos de dados. <\/p>\n\n\n\n

Nesse post irei criar uma tabela com t\u00edtulo fixo que permita que o cabe\u00e7alho da tabela permane\u00e7a vis\u00edvel \u00e0 medida que o usu\u00e1rio rola para baixo a barra de rolagem do navegador, o que facilita a refer\u00eancia dos r\u00f3tulos das colunas e a compreens\u00e3o do conte\u00fado apresentado. <\/p>\n\n\n\n

Dica:<\/strong> clique aqui para ver outros posts sobre HTML.<\/a><\/p>\n\n\n\n

Iremos criar a seguinte tabela em HTML para servidor como exemplo,<\/p>\n\n\n\n

Dados Pessoais<\/h2>\n\n\n \n \n \n \n \n \n \n
Nome<\/th>\n Idade<\/th>\n Cidade<\/th>\n Profiss\u00e3o<\/th>\n <\/tr>\n <\/thead>\n
Maria<\/td>\n 30<\/td>\n S\u00e3o Paulo<\/td>\n Engenheira<\/td>\n <\/tr>\n
Jo\u00e3o<\/td>\n 25<\/td>\n Rio de Janeiro<\/td>\n Estudante<\/td>\n <\/tr>\n
Ana<\/td>\n 35<\/td>\n Belo Horizonte<\/td>\n M\u00e9dica<\/td>\n <\/tr>\n
Pedro<\/td>\n 28<\/td>\n Recife<\/td>\n Advogado<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n\n\n
\n
\"Tabela
Tabela com T\u00edtulo fixo e Barra de Rolagem no Restante<\/figcaption><\/figure><\/div>\n\n\n

Tags importantes<\/h2>\n\n\n\n

Nos exemplos abaixo temos que destacar as tags respons\u00e1veis pela fixa\u00e7\u00e3o da linha dos t\u00edtulos da nossa tabela. Essa fixa\u00e7\u00e3o \u00e9 feita na folha de estilo (ou CSS).<\/p>\n\n\n\n