Como tornar a tabela HTML verticalmente rolável
Este post explicará o método para tornar a tabela HTML verticalmente rolável.
Como tornar a tabela HTML verticalmente rolável?
Para criar uma tabela rolável verticalmente em html, primeiro, faça uma tabela e adicione os dados relevantes. Em seguida, aplique as propriedades do CSS “Overflow-x" e "transbordamento-y”.
A propriedade "Overflow-X" com o valor "escondido”Clips o transbordamento. Além disso, a propriedade “Overflow-Y” com o valor “rolagem”Permitirá que você role para cima e para baixo da mesa.
Para fazer isso, experimente as instruções fornecidas.
Etapa 1: Crie um contêiner "div"
Primeiro de tudo, crie um “”Contêiner. Então, insira um atributo de classe como um “Div-scroll”.
Etapa 2: Crie uma tabela em HTML
Para criar uma tabela em HTML, siga as instruções fornecidas:
- Crie uma tabela utilizando o “
" marcação.
- Colocou o "fronteira" como "1px”E alinhe a tabela no centro usando o“alinhar”Atributo.
- O "
”A tag é utilizada para especificar as linhas na tabela. - ““
”A tag é usada para adicionar o cabeçalho à tabela. - ““
”É utilizado para inserir dados na tabela: Nome EU IA Categoria Jenny 01 Docker Herry 02 HTML/CSS Casar 03 Git Jazzé 04 JavaScript Edward 05 janelas Bella 06 Discórdia Coelhinho 07 Git Jack 08 HTML/CSS
Pode -se observar que a tabela foi criada com sucesso:
Etapa 3: Acesso aula e tabela
Agora, acesse o “div”Elemento utilizando o“.Div-scroll" nome da classe. O "mesa”É usado para acessar o elemento de tabela do contêiner Div.
Etapa 4: Tabela de estilo no CSS
Para estilizar a tabela no CSS, utilize as seguintes propriedades:
.Div-Scroll, Tabela
preenchimento: 12px;
Altura: 200px;
Largura: 500px;
Radio de fronteira: 10px;
Shadow de caixa: 1px 2px 1px 2px RGB (230, 229, 229);
margem: 15px;
fronteira: 1px Solid #141313;
Background-Color: #CBeaf8;
Overflow-y: rolagem;
Overflow-x: Hidden;
Aqui está a descrição do código acima mencionado:
- ““preenchimento”A propriedade é utilizada para definir o espaço ao redor do elemento.
- ““altura”Define a altura do elemento que é definida como“200px”.
- ““largura”Define a largura do elemento.
- ““Radio de fronteira”Define o raio do elemento. Ele permite ao usuário adicionar um canto arredondado ao elemento.
- ““Sombra da caixa”Propriedade define o quadro de sombra em torno do elemento.
- ““margem”É usado para definir o espaço ao redor do elemento.
- ““fronteira”A propriedade é adicionada para definir uma borda.
- ““cor de fundo”O recurso é utilizado para definir a cor da mesa na parte traseira.
- ““transbordamento-y"É definido como"rolagem”Para torná -lo verticalmente rolável.
- ““Overflow-x"Especifica o valor como"escondido”.
Pode -se observar que tornamos com sucesso a tabela rolagem verticalmente:
Nós explicamos o método para tornar a tabela verticalmente rolável.
Conclusão
Para tornar a tabela HTML verticalmente rolável, primeiro, crie a tabela utilizando o “
" marcação. Em seguida, aplique propriedades CSS para estilizar a tabela. Além disso, defina o valor do “Overflow-x"Propriedade como"escondido" e "transbordamento-y" como "rolagem”Para tornar a mesa rolável. Este post forneceu o procedimento para tornar a tabela verticalmente rolável.
- « Como mesclar duas matrizes em itens JavaScript e desduplicar
- Como fazer uma conta de administração usando o Regedit »