CSS 테이블에서 table-layout:fixed를 설정한 후 잘못된 셀 너비 설정에 대한 해결 방법

테이블에 table-layer:fixed 스타일을 설정한 후 테이블의 한 행이 병합된 것을 발견했습니다. 병합되지 않은 다른 행의 열 너비는 평균화되며 열 너비 설정은 유효하지 않게 됩니다. 자세한 내용은 아래에 있습니다. 누구나 솔루션을 배울 수 있습니다. 설정 테이블에서 table-layer:fixed 스타일을 설정한 후 테이블의 한 행이 병합되고 병합되지 않은 다른 행의 열 너비가 평균화되어 열 너비 설정이 유효하지 않게 되는 것을 발견했습니다. 테이블의 병합된 행을 제거하면 정상적으로 표시될 수 있습니다. 이유:
table-layout
: 고정 테이블, 각 열의 너비는 첫 번째 행에 의해 결정되며 나중에 지정된 너비는 무시됩니다. 첫 번째 행을 병합하여 열 너비가 균등하게 나누어졌습니다. 해결책 1:

tbody 앞에


를 추가합니다. 코드는 다음과 같습니다.

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

해결책 2:

숨겨진 행을 설정하여 너비를 지정합니다.

코드는 다음과 같습니다.

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

이 방법은 작동합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!