'min-width' 및 'max-width'가 표 셀에서 작동하지 않는 이유는 무엇이며 크기를 어떻게 제어합니까?-CSS 튜토리얼-php.cn

'min-width' 및 'max-width'가 표 셀에서 작동하지 않는 이유는 무엇이며 크기를 어떻게 제어합니까?

Mary-Kate Olsen

풀어 주다： 2024-10-25 07:07:02

원래의

549명이 탐색했습니다.

Why does `min-width` and `max-width` not work on table cells and how do I control their size?

테이블의 최소 너비 및 최대 높이 속성

'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!