CSS スタイル table-layout:fixed を使用した後のセル幅設定の解決策

次のコードは、table-layout:fixed を使用した後もセルの幅を有効に保つことを目的としています。IE でテストすると、幅の設定は無効になります:

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

解決策は以下のとおりです。固定スタイルが使用されます。最初の行を除いて、残りの行のセルの幅は最初の行のセルの幅に従って設定されます。この場合、幅を指定するために非表示の行を設定します:

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

。

この方法はIE6、IE7、IE8では正しく表示できますが、IE以外では効果がありません。別の方法は次のとおりです:

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

以上がCSS スタイル table-layout:fixed を使用した後のセル幅設定の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。