Adicionando preenchimento às células da tabela de bootstrap - CSS
Um dos principais componentes do desenvolvimento da web é a tabela. Ele exibe os dados em forma de tabular em um site. Se os dados nas células da tabela forem muito curtos ou muito longos, podem fazer com que a tabela pareça irregular. Para corrigir isso, o “preenchimento”A propriedade é utilizada para as células da tabela.
Este post descreverá:
- Como adicionar preenchimento às células da tabela de bootstrap?
- Como adicionar preenchimento às células da tabela de bootstrap usando CSS?
- Como adicionar preenchimento à mesa?
Pré -requisito: Crie uma tabela
Para criar uma tabela, siga as etapas mencionadas abaixo:
- Primeiro, use o “
”Tag e atribua o“mesa" e "Tabela com listras" Aulas.
- Dentro do "
”Elemento, especifique a parte do cabeçalho usando o“" elemento.
- Dentro dele, crie uma linha “
”De títulos usando o“ " Tag. - Em seguida, crie a seção do corpo da tabela usando o “" elemento.
- Por fim, crie linhas de dados usando o “
”Tag e“ " Tag. Html
Nome Curso Pontuação Jake Engenharia de software 90 Tina Introdução ao Java 80 John Sistemas de computador 89 Saída
Como adicionar preenchimento às células da tabela de bootstrap?
Uma maneira de adicionar preenchimento nas células da tabela é usar as aulas de estofamento de bootstrap. Esses incluem "p-*","px-*","py-*", e muitos mais.
Exemplo
No exemplo em andamento, use o “PX-5”Classe para adicionar preenchimento à esquerda e à direita dos títulos:
Nome Curso Pontuação Saída
Como adicionar preenchimento às células da tabela de bootstrap usando CSS?
O CSS oferece a maneira mais fácil de adicionar preenchimento em todas as células da tabela usando o “preenchimento" propriedade. Aqui está um exemplo que demonstra como adicionar preenchimento a todas as células da tabela:
.Tabela TD
preenchimento: 30px;Saída
Até agora, discutimos como adicionar preenchimento às células da tabela. Na parte próxima, você aprenderá como ajustar o preenchimento à mesa.
Como adicionar preenchimento à mesa?
No CSS, adicione as propriedades abaixo estatadas ao “mesa" aula:
.mesa
Fronteira: 2px Solid Darkcyan;
colapso da fronteira: separado;
preenchimento: 20px;Aqui:
- ““fronteira”A propriedade adiciona uma borda ao elemento.
- ““colapso da fronteira"Com o valor"separado”Adiciona uma borda separada ao redor da mesa.
- ““preenchimento”Adiciona espaço ao redor do conteúdo da mesa.
Saída
Compilamos os métodos para adicionar preenchimento às células da tabela de bootstrap.
Conclusão
Existem várias maneiras de adicionar preenchimento às células de uma mesa de bootstrap. Isso inclui o uso das aulas de preenchimento, como “p-*","px-*", e "py-*”. Mais especificamente, o preenchimento também pode ser adicionado usando CSS “preenchimento" propriedade. Este artigo explicou como adicionar espaço de preenchimento às células da tabela de bootstrap.
- Dentro do "