Ao criar páginas da web, frequentemente encontramos o problema de larguras de tabelas desalinhadas. Examinei detalhadamente os detalhes das configurações de altura e largura da tag de tabela em HTML e agora resumi-os da seguinte forma:
1. As configurações de largura e altura na tabela e suas funções : A altura definida na tabela na verdade define um valor mínimo, ou seja, quando o conteúdo da tabela ou a altura total da linha excede esse valor definido, o valor da altura do a tabela será estendida automaticamente, quando o conteúdo ou a altura da linha na tabela não atingir esse valor, ela será expandida automaticamente para esse valor. O valor da largura definido na tabela é geralmente o valor máximo da largura da tabela e não pode ser alterado, mesmo que a largura do conteúdo interno o exceda. (Se o conteúdo interno for uma imagem, a largura da tabela poderá ser alterada.)
2. As configurações de largura e altura na tag tr e suas funções : A configuração de largura na tag tr não tem efeito, pois como pode ser visto no primeiro ponto, a largura da tabela não pode ser alterada, e a tag tr irá é claro que não tem efeito. Portanto, só é possível discutir o ajuste de altura em tr. O ajuste de altura em tr está relacionado aos ajustes entre vários tr. Quando vários trs são definidos com valores de altura específicos, a altura de cada tr é alocada ao valor da altura total em proporção ao valor definido. Observe que o valor da altura total é mencionado aqui. Quando vários trs não definem um valor de altura específico, o valor total da altura é distribuído uniformemente. Quando alguns TRs possuem valores específicos definidos e alguns não definem valores específicos como padrão, primeiro garanta as necessidades básicas de cada TR e, em seguida, satisfaça o restante dos TRs com valores específicos definidos e, em seguida, todos os TRs sem valores específicos definidos tr. No último caso, também precisamos considerar a situação em que a largura total não é suficiente para o valor total de configuração de tr. Se não for suficiente, deverá atender às necessidades básicas de tr. estendido aqui. Em seguida, considere tr com conjunto de altura e, finalmente, considere tr sem conjunto de altura.
3. As configurações de largura e altura e suas funções na tag td : A largura e a altura na tag td são efetivas. Vejamos primeiro a largura de TD. A largura de um determinado TD está relacionada à largura de cada TD na coluna. Onde, você deve compreender a largura de um determinado TD de uma perspectiva global. Você não pode determinar sua largura a partir da configuração de largura deste. Depois de descobrirmos a largura de cada coluna, as coisas serão mais fáceis de manusear. Neste momento, a distribuição de largura entre cada TD é baseada na regra de distribuição de altura de cada tr no segundo artigo. A única diferença é que, por padrão, a largura de cada TD não é distribuída igualmente, mas proporcionalmente de acordo com seu tamanho real. distribuir conteúdo. Vamos dar uma olhada na configuração de altura de td. Isso é relativamente simples. No entanto, a altura de cada td depende da altura máxima da linha onde o td está localizado para determinar a altura de cada td nesta linha. de cada linha é determinado por tr. O princípio de alocação de altura é o mesmo. Outra coisa a notar é a relação entre a altura de td e a altura de tr. Em primeiro lugar, deve ser baseado nas necessidades do conteúdo. Nesta base, será determinado com base no valor definido. Qualquer valor de configuração que seja maior será usado se um tiver um valor definido e o outro não. um valor definido, então o valor definido será usado.
1. Use métodos tradicionais
<largura da tabela=400> <tr> <td largura=100></td> <td largura=100></td> <td largura=100></td> <td largura=100></td> < /tr> <tabela>
2. Utilize CSS
<style>.td{width:100px;}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class=td> </td> <td class=td></td> </tr> <tabela>O possível problema com os dois métodos acima é que se o conteúdo exceder a configuração, como a largura da imagem for maior que 100, ela se expandirá naturalmente e ajustará automaticamente a largura da tabela.
3. Utilize CSS
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td class =td></td> <td class=td></td> </tr> <tabela>Usando este método, você pode ocultar a parte em excesso. Se precisar de controle estrito, você pode usar este método. Se você definir o valor do atributo overflow como rolagem ou automático, poderá usar este método. ou automático, você pode usar este método. Se você definir o valor do atributo overflow como rolagem ou automático, poderá usar este método. Se definido como rolagem ou automático, você poderá usar a barra de rolagem para ajustar quando exceder...
ResumirO método acima é o método para definir a largura e a altura das células da tabela HTML que o editor apresenta a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a você. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!