"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > O CSS pode controlar a largura das células da tabela, independentemente do tamanho do conteúdo?

O CSS pode controlar a largura das células da tabela, independentemente do tamanho do conteúdo?

Publicado em 2024-11-07
Navegar:340

Can CSS Control Table Cell Widths Regardless of Content Size?

Controlando a largura das células da tabela com CSS

No domínio das tabelas HTML, garantir a largura uniforme das células da tabela pode ser um desafio ao lidar com conteúdo de tamanhos variados. Podemos alcançar esse resultado desejado puramente por meio de CSS, independentemente do número de células envolvidas?

A estrutura HTML é simples: um pai

serve como o contêiner da tabela, enquanto os elementos filhos
representam a tabela células.

CSS pode ser aproveitado para resolver esse problema. Para garantir larguras de células iguais, independentemente do tamanho do conteúdo, precisamos:

  1. Acionar o mecanismo de layout de tabela fixa: Definir layout da tabela: fixo; no pai
    . Isso instrui o navegador a aplicar as larguras das células especificadas em vez de ajustá-las automaticamente ao conteúdo.
  2. Atribuir uma largura às células da tabela: Embora não seja obrigatório, atribuir uma largura pequena (por exemplo, 2 %) para cada
    representando uma célula da tabela atua como um gatilho para o layout fixo da tabela.

    O código CSS final aparece da seguinte forma:

    div {
      display: table;
      width: 250px;
      table-layout: fixed;
    }
    
    div > div {
      display: table-cell;
      width: 2%;
    }

    Com esta abordagem, as células da tabela manterão larguras iguais, garantindo uma aparência consistente independentemente do seu conteúdo.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3