Solution to cell width setting after using CSS style table-layout:fixed

The following code is intended to keep the width of the cell valid after using table-layout:fixed. When tested in IE, the width setting is invalid:

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

The solution is given below. After the table-layout:fixed style is used, except for the first row, the width of the cells in the remaining rows is set according to the width of the cells in the first row. In this case , we set up a hidden row to specify the width:

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

This method can be displayed correctly in IE6, IE7, and IE8, but it has no effect in non-IE. Another method is given below:

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

The above is the detailed content of Solution to cell width setting after using CSS style table-layout:fixed. For more information, please follow other related articles on the PHP Chinese website!