첫 번째 행에 여러 열을 차지하는 셀이 있어서 이 문제가 발생했습니다. 점유된 열이 항상 열 너비를 균등하게 분배하는 문제가 해결되었습니다. 아래 진술을 살펴보고 마침내 그 이유를 이해하십시오.
웹 페이지의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!