Lösung für die ungültige Einstellung der Zellenbreite nach dem Festlegen von table-layout:fixed in der CSS-Tabelle

Nachdem ich den table-layer:fixed-Stil für die Tabelle festgelegt habe, habe ich festgestellt, dass eine Zeile in der Tabelle zusammengeführt wurde. Die Spaltenbreiten anderer nicht zusammengeführter Zeilen werden gemittelt , und die Spaltenbreiten werden gemittelt. Nachfolgend finden Sie detaillierte Lösungen. Nachdem ich den Stil „table-layer:fixed“ in der Einstellungstabelle festgelegt hatte, stellte ich fest, dass eine Zeile in der Tabelle zusammengeführt wurde und die Spaltenbreiten anderer nicht zusammengeführter Zeilen gemittelt wurden und die Einstellungen für die Spaltenbreite ungültig waren. Wenn die zusammengeführten Zeilen der Tabelle entfernt werden, kann sie normal angezeigt werden.

Ursache: table-layout: feste Tabelle, die Breite jeder Spalte wird durch die erste Zeile bestimmt und die später angegebene Breite wird ignoriert. Sie haben die erste Zeile zusammengeführt, sodass die Spaltenbreiten gleichmäßig verteilt sind.

Lösung eins:

Fügen Sie

vor tbody hinzu. Der Code lautet wie folgt:

<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" />

Lösung zwei:
Setzen a Versteckte Zeilen zur Angabe der Breite:

Der Code lautet wie folgt:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cell
padding
="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>

Diese Methode kann in IE6, IE7 und IE8 korrekt angezeigt werden, funktioniert jedoch nicht in nicht -IE Funktional. Eine weitere Methode ist unten angegeben:

Der Code lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonLösung für die ungültige Einstellung der Zellenbreite nach dem Festlegen von table-layout:fixed in der CSS-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!