Rolagem de tabela com HTML e CSS
Quando um usuário projeta um banco de dados para gerenciar dados de funcionários em uma empresa, a maioria dos dados e registros não pode se encaixar em uma única folha ou tabela. Para gerenciar os dados, o usuário torna a folha rolável. Existem dois tipos de “rolável”. O primeiro é verticalmente rolável, e o segundo é rolável horizontalmente. Rolável horizontal permite ao usuário rolar o conteúdo da janela esquerda ou direita. Enquanto a barra de rolagem vertical permite ao usuário rolar para cima ou para baixo o conteúdo.
Este post indicará:
- Método 1: Como mesa de rolar horizontalmente com html/css?
- Método 2: Como mesa de rolar verticalmente com html/css?
Método 1: Como mesa de rolar horizontalmente com html/css?
Para fazer uma tabela role horizontalmente com o html/css, primeiro, projete uma tabela utilizando o “ Para implicações práticas, tente o método abaixo declarado. Etapa 1: adicione um contêiner div Com o objetivo de criar um recipiente de div, adicione o “”Elemento no documento HTML. Etapa 2: Projete uma tabela Em seguida, utilize o “ Etapa 3: Adicione dados na tabela Em seguida, adicione os seguintes elementos para adicionar os dados: Pode -se observar que a tabela foi adicionada com sucesso: Etapa 5: contêiner de estilo div Acesse o contêiner Div usando o valor do atributo definido com o seletor de atributo. Para fazer isso, o “#conteúdo principal”É utilizado neste cenário: Em seguida, aplique estas propriedades do CSS: Saída Etapa 6: Torne a mesa rolável horizontalmente Agora, utilize o nome da classe para acessar a tabela e aplicar as propriedades abaixo estatadas para tornar a tabela rolável horizontalmente: De acordo com o código fornecido: Saída Etapa 7: Tabela de estilo Para fins de estilo da tabela, acesse o “mesa”E dados da tabela com“TD”: Aqui: Etapa 6: tabela de mesa de estilo Acesse o cabeçalho da tabela com a ajuda de “º”: Aplicar o "cor de fundo”Propriedade para definir a cor na parte traseira do elemento. Método 2: Como mesa de rolar verticalmente com html/css? Para rolar a tabela verticalmente com o HTML/CSS, defina a largura da tabela Acesso a tabela com a ajuda do nome da classe “.tabela dados”E aplique as propriedades abaixo mencionadas no trecho de código: Aqui: Saída É tudo sobre a tabela role com HTML e CSS. Conclusão Para fazer uma tabela rolar com HTML e CSS, primeiro, crie uma tabela usando o “" elemento. Então, defina o “altura" e "largura"Da tabela no CSS e aplique o"transbordar”Propriedade com o valor“rolagem”.
”Tag para projetar uma tabela para adicionar dados à página HTML. Em seguida, adicione o seguinte atributo dentro da tag da tabela:
”O elemento é utilizado para definir as linhas na tabela. elemento determina uma célula como cabeçalho de um grupo de células de tabela. ”É usado para adicionar os dados na tabela: Membros da equipe Sharqa Membros da equipe Adnan Equipe Membros do USAMA Sharqa Adnan Usama Hafsa Areej Zara Farah Minhal Zainab Maria Anees FAIZA Umar Taimoor Awais Farhan Hammad Aliyan Rafia Haroon Yumna LAIBA Hadia Rafia Shahrukh Talha dinamarquês Nadia Mukh Nimra
Fronteira: ranhura 3px azul;
margem: 30px 60px;
preenchimento: 30px;
Largura: 250px;
Altura: 360px;
Overflow: roll;
Cor: RGB (66, 40, 233);
Background-Color: RGB (243, 164, 164);
Background-Color: RGB (193, 225, 228);
Largura: 400px;
Altura: 150px;
Overflow: roll;
" elemento. Em seguida, acesse a tabela no CSS e aplique “a altura”, Largura e“transbordar”Propriedades na mesa. Para esse fim, o valor do “transbordar"É especificado como"rolagem”, O que torna o elemento rolável se os dados do elemento for. Este tutorial explicou o método para projetar a tabela rolável com a ajuda de HTML e CSS.