HTML에서 테이블 tr의 td 셀 너비 속성을 설정하는 방법

anonymity
풀어 주다: 2019-04-29 09:35:53
원래의
35605명이 탐색했습니다.

테이블 너비는 조정 가능하며 일부 TD는 너비가 고정되어 있습니다. 테이블의 너비는 화면에 따라 변하는 값이 아닌 고정된 값으로 설정하는 것을 원칙으로 합니다. 이제 테이블 td 셀의 너비를 설정하는 방법을 살펴보겠습니다.

HTML에서 테이블 tr의 td 셀 너비 속성을 설정하는 방법

예 1: Table의 너비가 600px이고 Table의 모든 tds의 총 너비가 600px 미만입니다. 브라우저는 td의 너비 비율에 따라 자동으로 너비를 계산합니다

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
               <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
</table>
运行结果:两个td都是300px;
로그인 후 복사

Table의 너비는 600px이고 처음 두 td의 너비는 입니다. 너비가 이미 600px이므로 세 번째 TD의 너비는 지정되지 않습니다. 이 경우 세 번째 TD의 너비는 콘텐츠의 너비를 기준으로 합니다. 그런 다음 처음 두 개의 너비는 비율에 따라 계산됩니다.

예시 2: 처음 두 td가 테이블 너비보다 작으면 마지막 td가 완성 역할을 합니다

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根据内容的</td>
            </tr>
</table>
로그인 후 복사

예시 3: 테이블의 td 내에서 블록 요소가 너비를 초과하여 배치된 경우 td 및 테이블의 테이블 -layout: 고정; (고정은 td의 너비가 고정 길이이고 td 내용의 변경에 따라 변경되지 않음을 의미합니다). 이런 식으로 IE6 및 7에서는 스크롤 막대가 표시되지 않으므로 td에 Overflow: auto;를 쓰지 마십시오. 가장 좋은 방법은 너비를 100%로 설정하여 div를 래핑하는 것입니다

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由宽度</td>
            </tr>
        </table>
로그인 후 복사

HTML에서 테이블 tr의 td 셀 너비 속성을 설정하는 방법

위 내용은 HTML에서 테이블 tr의 td 셀 너비 속성을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿