CSS : Explication détaillée du rôle et de l'utilisation de l'attribut table-layout

J'ai déjà vu beaucoup d'utilisation de CSS, mais je n'ai pas vu grand-chose sur certains attributs qui ne sont pas appelés moins utilisés. Aujourd'hui, je lisais un article sur Classic et j'ai trouvé une discussion sur le sujet "Comment utiliser CSS". pour forcer TD à ne pas envelopper ?" , j'ai découvert l'explication détaillée de l'utilisation de table-layout, et posté le contenu en premier :

Syntaxe :
table-layout : auto | fixe
Valeur :
auto :Valeur par défaut. Algorithme automatique par défaut. La disposition sera basée sur le contenu de chaque cellule. Le tableau ne sera pas affiché tant que tout le contenu de chaque cellule n'aura pas été lu et calculé
fixé : Algorithme de mise en page fixe. Dans cet algorithme, la largeur du tableau et des colonnes dépend de la somme des largeurs des objets col ou, si cela n'est pas spécifié, de la largeur de chaque cellule de la première ligne. Si le tableau ne spécifie pas d'attribut width (width), le tableau est rendu avec une largeur par défaut de 100 %.

Description :
Définir ou récupérer l'algorithme de disposition du tableau.
Vous pouvez améliorer les performances de rendu des tableaux grâce à cet attribut. Cette propriété amène IE à restituer le contenu de la table une ligne à la fois, offrant ainsi une plus grande vitesse aux utilisateurs d'informations. Cette propriété utilise l'une des méthodes suivantes pour disposer les largeurs des colonnes du tableau :
Utilisez les informations d'attribut width (width) de l'objet col ou colGroup.
Utilisez les informations de largeur de la cellule dans la première ligne du tableau.
Divisez la largeur du tableau de manière égale en fonction du nombre de colonnes du tableau. quelle que soit la largeur réelle du contenu du tableau.
Si le contenu de la cellule dépasse la largeur de la colonne, le contenu sera renvoyé à la ligne. Si le retour à la ligne n’est pas possible, le contenu sera rogné. Si cette propriété est définie sur fixe, overflow peut être utilisé pour contrôler la gestion du contenu qui dépasse la largeur de la cellule (td). Si la hauteur de ligne du tableau est spécifiée, le contenu encapsulé sera rogné verticalement s'il dépasse la hauteur de ligne de tableau spécifiée.
Définissez cette valeur d'attribut sur fixe pour aider à améliorer les performances de la table. L'effet est particulièrement significatif pour les longues tables.
La définition de la hauteur des lignes du tableau peut encore améliorer la vitesse de rendu. Le navigateur n'a pas besoin de détecter le contenu de chaque cellule de la ligne pour déterminer la hauteur de la ligne avant de commencer l'analyse et le rendu.
Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets. La fonctionnalité de script correspondante de

est tableLayout.

Notez les points suivants :
1. Vous pouvez améliorer les performances de rendu des tableaux grâce à cet attribut. Cette propriété amène IE à restituer le contenu de la table une ligne à la fois, offrant ainsi une plus grande vitesse aux utilisateurs d'informations.
2. Définissez cette valeur d'attribut sur fixe pour aider à améliorer les performances de la table. L'effet est particulièrement significatif pour les longues tables.
3. La définition de la hauteur des lignes du tableau peut améliorer encore la vitesse de rendu. Le navigateur n'a pas besoin de détecter le contenu de chaque cellule de la ligne pour déterminer la hauteur de la ligne avant de commencer l'analyse et le rendu.
—————————————————————————————————————————————— ————————————————————— －－－－－
Cette fonctionnalité est très utile pour la vitesse d'affichage et l'effet des tableaux longs. Peut être utilisé pour améliorer les performances de la table !

La question de l'auteur est également assez intéressante. Les exigences sont les suivantes :
1. Dans TD, ne pas avoir l'attribut nowrap. Vous devez trouver un moyen de mettre nowrap en CSS. . Dans TD, aucun saut de ligne n'est autorisé, et les parties excédentaires doivent être masquées
Méthode d'implémentation finale (notez que la DTD ne peut pas être ajoutée ici, sinon elle ne sera pas implémentée, je ne sais pas pourquoi) :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.aa{
    table-layout : fixed;
}
td{
    overflow:hidden;
    height:22px;
}
</style>
</head>

<body>
<!--    var grid1=new JGrid(null,300);  
grid1.create();  var fldsList=new Array([&#39;bag&#39;,120],[&#39;name&#39;,200],[&#39;type&#39;,100]);  
grid1.createTitle(fldsList);  grid1.tackData("dataLayer")    //-->
<table class="aa" border="1" cellpadding="0" cellspacing="0" bordercolor="#F9F9F9" id="dataLayer">
  <colgroup>
  <col width="119" />
  <col width="199" />
  <col width="99" />
  </colgroup>
  <tbody>
    <tr basestyle="oRowLine2">
      <td>J2SE</td>
      <td>Java 2 Standard Edition </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>J2EE</td>
      <td>Java 2 Enterprise Edition </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>J2ME</td>
      <td>Java 2 Micro Edition </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>GPS</td>
      <td>Global Positioning System </td>
      <td>全球定位系统</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>CDMA</td>
      <td>Code Division Multiple Access </td>
      <td>码分多址</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>SMS</td>
      <td>Short Message Service </td>
      <td>短信息服务</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>BREW</td>
      <td>Binary Runtime Environment for Wireless </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>Symbian</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>Windows Mobile Smartphone </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>MIDlet</td>
      <td> </td>
      <td>按MIDP规范开发的J2ME应用程序</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>MIDP</td>
      <td>Mobile Information Device Profile </td>
      <td>移动信息设备框架</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>Profile</td>
      <td> </td>
      <td>框架/简表</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>CLDC</td>
      <td>Connected Limited Device Configuration </td>
      <td>标准配置</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>CDC</td>
      <td>Connected Device Configuration </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>KVM</td>
      <td>K virtual Machine </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>SDK</td>
      <td>Software Development Kit </td>
      <td>软件开发工具包</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>JAR</td>
      <td>Java ARchive </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>JAD</td>
      <td>Java Application Descriptor </td>
      <td>应用程序描述符</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>GCF</td>
      <td>General Connection Framework </td>
      <td> </td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>RMS</td>
      <td>Record Management System </td>
      <td>记录管理系统</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>Sprite</td>
      <td> </td>
      <td>精灵</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td> </td>
      <td> </td>
      <td>冲突检查</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td> </td>
      <td> </td>
      <td>平铺图层</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!