CSS에서 table-layout:fixed를 사용한 후 셀 너비가 제어되지 않는 문제 해결

첫 번째 행에 여러 열을 차지하는 셀이 있어서 이 문제가 발생했습니다. 점유된 열이 항상 열 너비를 균등하게 분배하는 문제가 해결되었습니다. 아래 진술을 살펴보고 마침내 그 이유를 이해하십시오.
　웹 페이지의 table은 다음과 같습니다.

웹 페이지 코드는 다음과 같습니다.

<style type="text/css">  
    table{  
    border-collapse:collapse;  
    /*table-layout:fixed;*/  
    }  
    table,table td{  
        border-color:blue;  
    }  
</style>  
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">  
<tr>  
<td width="50%">1</td><td colspan="2">2</td>  
</tr>  
<tr>  
<td>3</td><td width="10%">4</td><td width="40%">5</td>  
</tr>  
<tr>  
<td colspan="3">http://wallimn.iteye.com</td>  
</tr>  
</table>

<style type="text/css">
	table{
	border-collapse:collapse;
	/*table-layout:fixed;*/
	}
	table,table td{
		border-color:blue;
	}
</style>
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">
<tr>
<td width="50%">1</td><td colspan="2">2</td>
</tr>
<tr>
<td>3</td><td width="10%">4</td><td width="40%">5</td>
</tr>
<tr>
<td colspan="3">http://wallimn.iteye.com</td>
</tr>
</table>

table-layout:fixed 주석을 삭제하면 테이블은 다음과 같습니다(참고, 4와 5가 같은 너비가 되었습니다):

이유가 무엇인가요? 고정 레이아웃 모델의 작업 단계를 이해해야 합니다.
1. 너비 속성 값이 자동이 아닌 모든 열 요소는 너비 값에 따라 열 너비를 설정합니다.
2. ---그러나 테이블의 첫 번째 행 이 열에 위치한 셀의 너비가 자동이 아닌 경우---이 열의 너비는 셀 너비에 따라 설정됩니다. 이 셀이 여러 열에 걸쳐 있으면 너비는 다음과 같습니다.
3. 위의 두 단계를 거친 후에도 열의 너비가 여전히 자동이면 테이블의 너비가 최대한 동일하도록 크기가 자동으로 결정됩니다. 테이블의 너비 값 또는 열 너비의 합(둘 중 더 큰 값)으로 설정됩니다. 테이블 너비가 열 너비의 합보다 큰 경우 차이를 열 수로 나눈 다음 결과 너비를 각 열에 추가합니다.
.................................. .................
　이 방법은 모든 열 너비가 테이블의 첫 번째 행에 의해 정의되기 때문에 매우 빠릅니다. 첫 번째 행 이후의 모든 행의 너비는 첫 번째 행에 정의된 열 너비에 따라 셀 크기가 지정됩니다. 열 너비를 변경하지 마세요. 이는 해당 셀에 지정된 너비 값이 무시된다는 의미입니다.

2010-09-13

이 문제는 테이블의 첫 번째 행 높이를 설정하는 것이 더 쉽습니다. 열 너비를 할당하는 데 특별히 사용되는 1px로 변경되었습니다.
　

　tr.first{ 
     height:1px; 
     
font-size
:1px; 
     
line-height
:1px; 
   }

그런 다음 첫 번째 줄에 class="first"를 추가하세요.

물론, 고정 속성을 사용하지 않음으로써 이 문제를 해결할 수도 있습니다.

PS: 이 문제는 동일한 테이블의 열 너비를 제어할 수 없을 뿐만 아니라 두 테이블의 셀 너비가 일치하지 않게 만들 수도 있습니다. 예를 들어 한 테이블에 4개의 열이 있고 각 열은 25%입니다. 다른 테이블도 동일하지만 첫 번째 행이 두 번째에서 네 번째 열에 걸쳐 있으므로 두 테이블의 첫 번째 열 너비가 일치하지 않습니다(table-layout:fixed 사용).

위 내용은 CSS에서 table-layout:fixed를 사용한 후 셀 너비가 제어되지 않는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!