Lösung für die Einstellung der Zellenbreite nach Verwendung des CSS-Stils table-layout:fixed

Der folgende Code soll die Breite der Zelle nach der Verwendung von table-layout:fixed beibehalten. Beim Testen im IE ist die Breiteneinstellung ungültig:

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

Die Lösung ist unten angegeben. Nachdem der Stil „table-layout:fixed“ verwendet wurde, wird die Breite der Zellen in den übrigen Zeilen entsprechend der Breite der Zellen in der ersten Zeile festgelegt. Wir richten eine versteckte Zeile ein, um die Breite anzugeben:

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

Diese Methode kann in IE6, IE7 und IE8 korrekt angezeigt werden, hat jedoch keine Auswirkung in Nicht-IE. Eine weitere Methode finden Sie unten:

<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 Einstellung der Zellenbreite nach Verwendung des CSS-Stils table-layout:fixed. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!