Résoudre le problème de la largeur de cellule incontrôlée après avoir utilisé table-layout : corrigé en CSS

J'ai rencontré ce problème car il y avait une cellule dans ma première ligne qui occupait plusieurs colonnes. Correction du fait que les colonnes occupées répartissaient toujours la largeur des colonnes de manière uniforme. Jetez un œil à la déclaration ci-dessous et comprenez enfin la raison.
　Le formulaire sur la page Web est tel qu'indiqué ci-dessous :

Le code de la page Web est le suivant :

<style type="text/css">  
    table{  
    border-collapse:collapse;  
    /*table-layout:fixed;*/  
    }  
    table,table td{  
        border-color:blue;  
    }  
</style>  
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">  
<tr>  
<td width="50%">1</td><td colspan="2">2</td>  
</tr>  
<tr>  
<td>3</td><td width="10%">4</td><td width="40%">5</td>  
</tr>  
<tr>  
<td colspan="3">http://wallimn.iteye.com</td>  
</tr>  
</table>

<style type="text/css">
	table{
	border-collapse:collapse;
	/*table-layout:fixed;*/
	}
	table,table td{
		border-color:blue;
	}
</style>
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">
<tr>
<td width="50%">1</td><td colspan="2">2</td>
</tr>
<tr>
<td>3</td><td width="10%">4</td><td width="40%">5</td>
</tr>
<tr>
<td colspan="3">http://wallimn.iteye.com</td>
</tr>
</table>

Si vous supprimez le commentaire table-layout:fixed, le tableau deviendra comme suit (notez que 4 et 5 sont devenus de largeur égale) :

Quelle en est la raison ? Vous devez comprendre les étapes de travail du modèle de mise en page fixe :
1. Tous les éléments de colonne dont la valeur d'attribut de largeur n'est pas automatique définiront la largeur de la colonne en fonction de la valeur de largeur
2. une colonne est automatique --- mais la largeur de cellule dans cette colonne dans la première ligne du tableau n'est pas automatique --- définit la largeur de cette colonne en fonction de la largeur de la cellule. Si cette cellule s'étend sur plusieurs colonnes, la largeur est. uniformément répartie sur ces colonnes.
3 .Après les deux étapes ci-dessus, si la largeur de la colonne est toujours automatique, sa taille sera automatiquement déterminée afin que sa largeur soit aussi égale que possible à ce moment-là. le tableau est défini sur la valeur de largeur du tableau ou sur la somme des largeurs de colonnes (selon la valeur la plus grande (ou). Si la largeur du tableau est supérieure à la somme de ses largeurs de colonnes, divisez la différence par le nombre de colonnes, et puis ajoutez la largeur résultante à chaque colonne
............ ........................ Cette méthode est très rapide car toutes les largeurs de colonne sont déterminées par la définition de la première colonne du tableau. Les cellules de toutes les lignes après la première ligne ne sont pas dimensionnées en fonction de la largeur de colonne définie dans la première ligne. modifier la largeur de la colonne. Cela signifie que la valeur de largeur spécifiée pour ces cellules sera Ignorer.


2010-09-13
Ce problème est plus facile à résoudre. peut définir la hauteur de la première ligne du tableau sur 1px, ce qui est spécialement utilisé pour allouer les largeurs de colonnes.
　

　tr.first{ 
     height:1px; 
     
font-size
:1px; 
     
line-height
:1px; 
   }

Ajoutez ensuite class="first" à la première ligne.

Bien sûr, cela peut également être résolu en n'utilisant pas l'attribut fixe.

Reposter PS : ce problème rendra non seulement la largeur des colonnes du même tableau incontrôlable, mais rendra également la largeur des cellules de deux tableaux incohérente, comme un tableau à quatre colonnes, chaque colonne fait 25 %, il en va de même pour une autre table, mais sa première ligne s'étend sur la deuxième à la quatrième colonne, donc la largeur de la première colonne des deux tables est incohérente (utilisez table-layout:fixed).

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!