'min-width' 및 'max-width'가 표 셀에서 작동하지 않는 이유는 무엇이며 크기를 어떻게 제어합니까?
- Mary-Kate Olsen원래의
- 2024-10-25 07:07:02459검색
테이블의 최소 너비 및 최대 높이 속성
'min- width' 및 'max-width' 속성을 사용하면 간단하지 않을 수 있습니다. 이 문서에서는 이러한 속성이 무시되어 예상치 못한 동작을 일으키는 일반적인 문제를 다룹니다.
문제:
'최소 너비' 및 '최대 너비' 정의 'td' 요소 또는 'td' 요소 내에 중첩된 'div' 요소 내에서 충돌하는 동작이 발생합니다. 콘텐츠는 지정된 크기를 준수할 수 있지만 테이블의 전체 크기는 변경되지 않고 과도한 공백이 남습니다.
해결책:
CSS 사양에서는 '최소 너비'를 나타냅니다. ' 및 'max-width' 속성은 테이블 셀(예: 'td' 요소)에 대해 정의되지 않습니다. 대신 'width' 속성을 사용하여 최소 너비를 적용해야 합니다.
테이블 셀의 너비를 적용하려면 'table-layout' 속성을 "fixed"로 설정해야 합니다. 이는 브라우저가 지정된 '너비' 값을 기반으로 열 너비를 계산하도록 지시하여 공백 문제를 제거합니다.
코드 예:
다음 수정된 코드는 문제를 해결합니다. 'width' 속성을 사용하고 'table-layout'을 "fixed"로 설정:
<code class="html"><html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
width: 10px;
border: 1px solid red;
overflow: hidden;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html></code>
'table-layout'을 "fixed"로 설정하면 명시적으로 정의되지 않은 열 너비에도 영향을 줄 수 있습니다. . 의도하지 않은 결과를 방지하려면 모든 열의 너비가 지정되어 있는지 확인하세요.
위 내용은 'min-width' 및 'max-width'가 표 셀에서 작동하지 않는 이유는 무엇이며 크기를 어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!