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>

해결책은 아래에 나와 있습니다. -layout 뒤에는 테이블이 있습니다. 고정 스타일이 사용됩니다. 첫 번째 행을 제외하고 나머지 행의 셀 너비는 첫 번째 행의 셀 너비에 따라 설정됩니다. 이 경우 너비를 지정하기 위해 숨겨진 행을 설정합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!