Lösung des Problems der unkontrollierten Zellenbreite nach Verwendung von table-layout:fixed in CSS

Ich bin auf dieses Problem gestoßen, weil sich in meiner ersten Zeile eine Zelle befand, die mehrere Spalten belegte. Das Problem wurde behoben, sodass die Spaltenbreite der belegten Spalten immer gleichmäßig verteilt wurde. Schauen Sie sich die folgende Aussage an und verstehen Sie endlich den Grund.
　Das Formular auf der Webseite ist wie folgt:

Der Webseitencode lautet wie folgt:

<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>

Wenn Sie den Kommentar table-layout:fixed entfernen, sieht die Tabelle wie folgt aus (beachten Sie, dass 4 und 5 gleich breit geworden sind):

Was ist der Grund dafür? Sie müssen die Arbeitsschritte des festen Layoutmodells verstehen:
1. Alle Spaltenelemente, deren Breitenattributwert nicht automatisch ist, legen die Breite der Spalte entsprechend dem Breitenwert fest Eine Spalte ist automatisch – aber die Breite der Zelle in dieser Spalte in der ersten Zeile der Tabelle ist nicht automatisch – legen Sie die Breite dieser Spalte entsprechend der Zellenbreite fest Die Breite wird gleichmäßig auf diese Spalten verteilt. Wenn die Breite der Spalte nach den beiden oben genannten Schritten immer noch automatisch ist, wird ihre Größe automatisch so bestimmt, dass ihre Breite zu diesem Zeitpunkt so gleich wie möglich ist Die Breite der Tabelle wird auf den Breitenwert der Tabelle oder die Summe der Spaltenbreiten (je nachdem, welcher Wert größer ist (oder)) festgelegt. Wenn die Tabellenbreite größer als die Summe ihrer Spaltenbreiten ist, dividieren Sie die Differenz durch die Anzahl der Spalten , und fügen Sie dann die resultierende Breite zu jeder Spalte hinzu
............ ........................
Diese Methode ist sehr schnell, da alle Spaltenbreiten durch die erste Spalte der Tabellenzeile bestimmt werden. Die Größe der Zellen in allen Zeilen nach der ersten Zeile entspricht der in der ersten Zeile definierten Zellenbreite ändert die Spaltenbreite nicht. Das bedeutet, dass der für diese Zellen angegebene Breitenwert „Ignorieren“ lautet.


2010-09-13
Dieses Problem ist einfacher zu lösen Sie können die Höhe der ersten Zeile der Tabelle auf 1 Pixel festlegen, was speziell zur Zuweisung von Spaltenbreiten verwendet wird.
　

Fügen Sie dann class="first" zur ersten Zeile hinzu.

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

Das lässt sich natürlich auch dadurch lösen, dass man das Attribut „fixed“ nicht verwendet.


Reposter PS: Dieses Problem führt nicht nur dazu, dass die Spaltenbreite derselben Tabelle nicht kontrollierbar ist, sondern auch dazu, dass die Zellenbreite zweier Tabellen inkonsistent ist. Beispielsweise hat eine Tabelle vier Spalten , jede Spalte beträgt 25 %, das Gleiche gilt für eine andere Tabelle, aber ihre erste Zeile erstreckt sich über die zweite bis vierte Spalte, sodass die Breite der ersten Spalte der beiden Tabellen inkonsistent ist (verwenden Sie table-layout:fixed).

Das obige ist der detaillierte Inhalt vonLösung des Problems der unkontrollierten Zellenbreite nach Verwendung von table-layout:fixed in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!