>  기사  >  웹 프론트엔드  >  CSS에서 table-layout:fixed를 사용한 후 셀 너비가 제어되지 않는 문제 해결

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

黄舟
黄舟원래의
2017-06-30 13:54:184832검색

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

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

<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가 같은 너비가 되었습니다):

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


이유가 무엇인가요? 고정 레이아웃 모델의 작업 단계를 이해해야 합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.