Peut-être que lorsque je tire ce nom dans cet article, quelqu'un demandera: pourquoi suivez-vous toujours les tables? C'est déjà obsolète ... Dépêchez-vous XHTML ... Div est bon ... UL est bon ... OL est bon ... DL est bon ... DL est bon ... c'est fini, je ne sais pas quoi d'autre est mieux.
La table est-elle vraiment obsolète? Connaissez-vous vraiment la table? Utilisez-vous vraiment la table?
Nous ne sommes pas ce que nous devons faire pour lutter contre une bataille verbale, alors laissez-la être laissée à ceux qui ont beaucoup de temps.
Retour au sujet:
Je ne me souviens pas quand quelqu'un a utilisé une table pour simuler DataGrid et a dit, pourquoi les textes TD qui ne dépassent-ils pas la largeur fixe ne peuvent-ils pas être cachés, mais envelopperont directement la ligne?
Oui, c'est le cas, comme:
Exécutez le code comme ci-dessus et vous constaterez que le texte dans la cellule qui dépasse la largeur fixe ne sera pas masqué, mais sera affiché avec une nouvelle ligne. De toute évidence, ce n'est pas ce que je veux dire.
Il semble que cela semble être une caractéristique de la table. Il ne peut pas prendre en charge la combinaison de {largeur: * px; blanc-espace: nowrap; overflow: caché;} très bien. En dernière analyse, l'espace blanc: Nowrap ne fonctionne pas, il semble donc que le débordement: Hidden est invalide. {Remarque: s'il s'agit d'une série de caractères dénués de sens, cela peut prendre effet. Par exemple: <td class = col1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td>, à ce moment, {white space: nowrap} ne sera pas nécessaire pour le forcer Un mot sans pause de ligne, donc une largeur au-delà .col1 sera cachée}
[Solution 1:]
Plus tard, quelqu'un a mentionné que l'utilisation de la largeur du pourcentage suffit. Après les tests, c'est en effet possible. J'ai légèrement modifié les styles de plusieurs lignes du premier paragraphe, et les autres restent inchangés:
.Col1 {largeur: 20%;}
.Col2 {largeur: 40%;}
.Col3 {largeur: 40%;}
Après avoir exécuté le code modifié, vous constaterez que le texte au-delà de la largeur est en effet caché et que l'effet souhaité semble être obtenu.
En fait, l'utilisation de la largeur du pourcentage résout le problème de la cachette de ce texte, mais cela ne semble pas être la meilleure solution à désirer, car parfois nous avons besoin d'une largeur fixe, pas d'une largeur pour pourcentage.
La racine de tout cela réside dans la façon de faire afficher le texte de la cellule en une seule ligne sans emballer les lignes.
[Solution 2:]
Pour répondre à cette exigence, en plus d'utiliser des styles, nous pouvons également penser à une étiquette que nous n'avons pas utilisée depuis longtemps. La fonction de cet élément est de forcer le contenu à s'afficher sur une seule ligne. Le code ci-dessus est modifié comme suit, et les autres restent inchangés:
<Table Border = 1 Cellpaçage = 0 Résumé = Regardez en arrière et jetez un œil à la table: TD joue également un débordement: Hidden>
<tr>
<td class = Col1> <Nobr> Shenzhou Elegant Q400N </br> </td>
<td class = col2> <nobr> élégant Q400N, en utilisant le processeur Intel Core2 Duo (Merom) T5450 (1,66g) </bobr> </td>
<td class = col3> <nobr> plate-forme xunchi 4, rentable exceptionnelle, belle apparence </brr> </td>
</tr>
</ table>
Après avoir apporté cette modification, vous constaterez que l'effet est effectivement atteint. Devriez-vous être excité? Non, cela ne semble pas être la meilleure solution, car après tout, il est un peu désagréable d'utiliser une marque d'élément qui n'a pas été utilisée depuis longtemps et n'est pas recommandée.
Suivant cette idée, j'ai considéré ce problème sous une perspective différente et j'ai constaté que le problème peut être résolu facilement.
Puisque nous ne pouvons pas simplement ajouter de l'espace blanc: NowAP à Th et TD dans une cellule de largeur fixe, qu'en est-il d'ajouter un autre élément de marqueur à une cellule de largeur fixe?
Meilleure solution:
L'exécution du code ci-dessus constatera que cette approche est OK, et en termes de simplicité, de lisibilité et de rationalité du code, elle est meilleure que les solutions précédentes.
{Les étudiants qui n'ont pas fait de cachette de contenu dépassant une largeur fixe pour les cellules peuvent d'abord jouer sur la machine, puis lire cet article}
En fait, la table est une chose intéressante et jouable. Nous ne devons pas le regarder avec des yeux colorés parce qu'il a sa propre raison.
Je continuerai à écrire des articles sur des tables plus tard, et je serai également de l'auto-divertissement.