Maison > interface Web > tutoriel CSS > Solution au paramètre de largeur de cellule après avoir utilisé la disposition de table de style CSS : corrigé

Solution au paramètre de largeur de cellule après avoir utilisé la disposition de table de style CSS : corrigé

黄舟
Libérer: 2017-06-30 13:51:01
original
1960 Les gens l'ont consulté

Le code suivant est destiné à conserver la largeur de la cellule valide après l'utilisation de table-layout:fixed Lorsqu'il est testé dans IE, le paramètre de largeur n'est pas valide :

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td style="width:100px">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td>1.1</td>
    <td style="width:80px">2.1</td>
    <td style="width:20px">2.2</td>
  </tr>
</table>
Copier après la connexion

. La solution est donnée ci-dessous. Après l'utilisation du style table-layout:fixed, à l'exception de la première ligne, la largeur des cellules des lignes restantes est définie en fonction de la largeur des cellules de la première ligne. nous configurons une ligne cachée pour spécifier la largeur :

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
<tr style="display:none">
  <td style="width:100px"></td>
  <td style="width:80px"></td>
  <td style="width:20px"></td>
</tr>
<tr>
  <td>1</td>
  <td colspan="2">2</td>
</tr>
<tr>
  <td>1.1</td>
  <td>2.1</td>
  <td>2.2</td>
</tr>
</table>
Copier après la connexion

Cette méthode peut être affichée correctement dans IE6, IE7 et IE8, mais elle n'a aucun effet dans les environnements non-IE. Une autre méthode est donnée ci-dessous :

<style>
td{border:1px solid red;}
</style>
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1">
<tr style="height:0;">
  <th style="width:100px"></th>
  <th style="width:80px"></th>
  <th style="width:20px"></th>
</tr>
<tr>
  <td>1</td>
  <td colspan="2">2</td>
</tr>
<tr>
  <td>1.1</td>
  <td>2.1</td>
  <td>2.2</td>
</tr>
</table>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal