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

테이블 너비는 조정 가능하며 일부 TD는 너비가 고정되어 있습니다. 테이블의 너비는 화면에 따라 변하는 값이 아닌 고정된 값으로 설정하는 것을 원칙으로 합니다. 이제 테이블 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 셀 너비 속성을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!