Talvez quando eu receba esse nome neste artigo, alguém perguntará: Por que você ainda está seguindo as tabelas? Isso já está desatualizado ... Apresse -se xhtml ... div é bom ... Ul é bom ... OL é bom ... DL é bom ... DL é bom ... Isso está finalizado, eu não sei o que mais é melhor.
A mesa está realmente desatualizada? Você realmente conhece a mesa? Você realmente usa a tabela?
Não somos o que precisamos fazer para travar uma batalha verbal, então deixe -se deixar para aqueles que têm muito tempo.
Voltar ao tópico:
Não me lembro quando alguém usou uma tabela para simular o Datagrid e disse: por que os textos de TD que excedem a largura fixa estão ocultos, mas embrulhar diretamente a linha?
Sim, gosta:
Execute o código como acima e você encontrará esse texto na célula que exceder a largura fixa não será oculto, mas será exibido com uma nova linha. Obviamente, não é isso que quero dizer.
Parece que isso parece ser uma característica da tabela. Ele não pode suportar a combinação de {largura:*px; espaço branco: Nowrap; Overflow: Hidden;} muito bem. Na análise final, o espaço branco: Nowrap não funciona, então parece que o transbordamento: Hidden é inválido. {Nota: se for uma série de caracteres sem sentido, pode entrar em vigor. Por exemplo: <td class = col1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Uma palavra sem quebra de linha, então uma largura além do .Col1 será oculta}
[Solução 1:]
Mais tarde, alguém mencionou que o uso de largura percentual é suficiente. Após o teste, é realmente possível. Modifiquei ligeiramente os estilos de várias linhas do primeiro parágrafo, e os outros permanecem inalterados:
.col1 {width: 20%;}
.col2 {width: 40%;}
.col3 {width: 40%;}
Depois de executar o código modificado, você descobrirá que o texto além da largura está realmente oculto e o efeito desejado parece ser obtido.
De fato, o uso da largura percentual resolve o problema de ocultar este texto, mas essa não parece ser a melhor solução a ser desejada, porque às vezes precisamos de uma largura fixa, não uma largura percentual.
A raiz de tudo isso está em como fazer o texto na célula ser exibido em uma linha sem linhas de embalagem.
[Solução 2:]
Para atender a esse requisito, além de usar estilos, também podemos pensar em um rótulo que não usamos há muito tempo. A função desse elemento é forçar o conteúdo a ser exibido em uma linha. O código acima é modificado da seguinte maneira, e os outros permanecem inalterados:
<Tabela Border = 1 CellPacing = 0 Resumo = Olhe para trás e dê uma olhada na Tabela: TD também reproduz transbordamento: Hidden>
<tr>
<td class = col1> <br> shenzhou elegante q400n </br> </td>
<td class = col2> <Born> elegante Q400N, usando o processador Intel Core2 Duo (Merom) T5450 (1.66G)
<TD Class = Col3> <Born> Xunchi 4 Plataforma, excelente custo-efetividade, bela aparência </borr> </td>
</tr>
</tabela>
Depois de fazer essa modificação, você descobrirá que o efeito é realmente alcançado. Você deveria estar animado? Não, essa não parece ser a melhor solução, porque, afinal, é um pouco desagradável usar uma marca de elemento que não é usada há muito tempo e não é recomendada.
Após essa idéia, considerei esse problema de uma perspectiva diferente e descobri que o problema pode ser resolvido facilmente.
Como não podemos simplesmente adicionar espaço em branco: NowRap ao TH e TD em uma célula de largura fixa, e então e adicionamos outro elemento de marcador a uma célula de largura fixa?
Melhor solução:
A execução do código acima descobrirá que essa abordagem é boa e, em termos de simplicidade, legibilidade e racionalidade do código, é melhor que as soluções anteriores.
{Os alunos que não fizeram ocultar conteúdo superior a uma largura fixa para as células podem jogar primeiro na máquina e depois ler este artigo}
De fato, a tabela é uma coisa interessante e jogável. Não devemos olhar para os olhos coloridos, porque tem seu próprio motivo.
Continuarei a escrever alguns artigos sobre tabelas mais tarde e também servir como entretenimento próprio.