TD de production de pages Web peut également déborder et masquer la production de pages display_HTML/Xhtml

TD de production de pages Web peut également déborder et masquer la production de pages display_HTML/Xhtml_Web

WBOY

Libérer： 2016-05-16 16:42:15

original

2013 Les gens l'ont consulté

Peut-être que dès que je donnerai un tel nom à cet article, quelqu'un demandera : Pourquoi faites-vous toujours attention à table ? Elle est déjà obsolète... Dépêchez-vous Xhtml... div c'est bien... ul c'est bien. .. ol c'est bien... dl c'est bien... c'est fini, non Il vaut mieux savoir quoi d'autre.

La table est-elle vraiment dépassée ? Comprenez-vous vraiment le tableau ? Savez-vous vraiment utiliser les tableaux ?

La guerre des mots n'est pas ce que nous voulons faire, laissons le soin à ceux qui ont tout le temps.

Retour au sujet :

Je ne me souviens pas quand quelqu'un utilisait un tableau pour simuler le DataGrid et demandait pourquoi le texte du td qui dépasse la largeur fixe ne pouvait pas être masqué, mais va envelopper directement?

Oui, c'est bien le cas, comme :

Astuce : Vous pouvez modifier une partie du code avant d'exécuter
Exécutez le code ci-dessus et vous constaterez que le texte dans la cellule qui dépasse la largeur fixe ne sera pas masqué, mais sera affiché dans une nouvelle ligne. Évidemment, ce n'est pas mon intention.

Il semble que ce soit une caractéristique du tableau. Il ne peut pas bien supporter la combinaison de {width:*px;white-space:nowrap;overflow:hidden;}. En dernière analyse, il est blanc. -space: nowrap ne fonctionne pas, il semble donc que overflow:hidden ne soit pas valide. {Remarque : S'il s'agit d'une série de caractères dénués de sens, cela peut prendre effet, par exemple : & lt; td } Pour le forcer à être dans une ligne d'affichage, car cette série de a sera reconnue comme un seul mot sans saut de ligne, donc les a qui dépassent la largeur de .col1 seront masqués}

　[Solution 1:]

Plus tard, quelqu'un Il est mentionné qu'utiliser un pourcentage de largeur est suffisant. Après test, c'est effectivement possible. Modifiez légèrement le style de quelques lignes du premier paragraphe et laissez les autres inchangées :

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

Après avoir exécuté le code modifié, vous constaterez que le texte qui dépasse la largeur est bien masqué. L'effet semble être obtenu.

En fait, utiliser une largeur en pourcentage peut effectivement résoudre le problème du masquage du texte, mais cela ne semble pas être la meilleure solution, car parfois nous avons besoin d'une largeur fixe, pas d'une largeur en pourcentage.

La racine de tout cela est de savoir comment afficher le texte de la cellule sur une seule ligne sans retour à la ligne.

　[Solution 2 :]

Pour répondre à cette exigence, en plus d'utiliser des styles, on peut aussi penser à une balise la fonction de cet élément est de forcer le contenu à s'afficher sur une seule ligne. Apportez les modifications suivantes au code ci-dessus, en laissant tout le reste inchangé :

Shenzhou élégant Q400N

< ;nobr> ; Élégant Q400N, utilisant le processeur Intel Core2 Duo (Merom) T5450 (1,66G)

Plateforme Centrino 4, exceptionnel Excellent rapport qualité/prix, belle apparence

effectivement atteint, est-il temps d'être excité ? Non, cela ne semble pas être la meilleure solution, car après tout, c'est un peu désagréable d'utiliser une balise d'élément qui n'a pas été utilisée depuis longtemps et qui n'est pas recommandée.

Suite à cette idée, j'ai considéré ce problème sous un angle différent et j'ai constaté que le problème était facilement résolu.

Puisque nous ne pouvons pas simplement ajouter white-space:nowrap à th et td dans une cellule à largeur fixe, que se passe-t-il si nous ajoutons un élément mark à la cellule à largeur fixe ?

Meilleure solution :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>回头来看看Table：TD也玩overflow:hidden</title> 
<style type="text/css"> 
table {width:500px;table-layout:fixed;} 
.col1 {width:100px;} 
.col2 {width:200px;} 
.col3 {width:200px;} 
th strong {display:block;width:100%;} 
tr strong,tr td {white-space:nowrap;overflow:hidden;} 
</style> 
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> 
<body> 
<table border="1" cellspacing="0" summary="测试"> 
<thead> 
<tr> 
<th class="col1"><strong>产品名称</strong></th> 
<th class="col2"><strong>产品介绍</strong></th> 
<th class="col3"><strong>产品备注</strong></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>神舟 优雅Q400N</td> 
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td> 
<td>迅驰4平台，突出的性价比，漂亮的外观</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

提示：您可以先修改部分代码再运行

　　运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}

　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。

　　之后会继续写一些关于table的文章，也作自娱之用。