CSS table-layout 속성의 사용 예에 대한 자세한 설명-JS 튜토리얼-php.cn

CSS table-layout 속성의 사용 예에 대한 자세한 설명

小云云

풀어 주다： 2018-01-18 09:05:30

원래의

1637명이 탐색했습니다.

이 기사에서는 주로 table-layout 속성의 사용법을 공유합니다. tableLayout 속성은 테이블 셀, 행 및 열의 알고리즘 규칙을 표시하는 데 사용됩니다. 이 기사에서는 예제 코드를 통해 모든 사람에게 CSS 테이블 레이아웃 속성의 사용법을 소개합니다. 필요한 친구가 이를 참조할 수 있기를 바랍니다.

머리말:

오늘은 table-layout 속성 사용법을 자세히 알려드리겠습니다.

 /*eg:设置表格布局算法*/
 table{
     table-layout:fixed;
 }

로그인 후 복사

***이 글의 키워드: 테이블 레이아웃 속성 값, 정의 및 사용법, 고정 테이블 레이아웃, 자동 테이블 레이아웃.

1정의 및 사용법

tableLayout 속성은 테이블 셀, 행 및 열에 대한 알고리즘 규칙을 표시하는 데 사용됩니다.

①이 속성은 테이블 레이아웃을 완성하는 데 사용되는 레이아웃 알고리즘을 지정합니다.

②고정 레이아웃 알고리즘은 더 빠르지만 그다지 유연하지는 않습니다.

③자동 레이아웃 알고리즘은 느리지만 기존 HTML 테이블을 더 잘 반영합니다.

2 고정 테이블 레이아웃

① 자동 테이블 레이아웃에 비해 브라우저가 테이블을 더 빠르게 레이아웃할 수 있습니다.

② 가로 레이아웃은 테이블 너비, 열 너비, 테이블 테두리 너비, 셀 간격에만 의존합니다.

③고정 테이블 레이아웃을 사용하면 사용자 에이전트가 첫 번째 행을 받은 후 테이블을 표시할 수 있습니다.

3 테이블 레이아웃 자동 결정

①열의 너비는 행이 없는 열 셀의 가장 넓은 내용으로 설정됩니다.

②최종 레이아웃 내용을 결정하기 전에 테이블의 모든 요소에 액세스해야 하기 때문에; 알고리즘은 때때로 오랜 시간이 걸릴 수 있습니다.

4table-layout 속성 값

①automatic: (기본값) 열 너비는 셀 내용에 따라 설정됩니다.

②fixed: 열 너비는 테이블 너비와 열 너비에 따라 설정됩니다.

③inherit: 테이블이 테이블에서 상속되어야 함을 규정합니다. 상위 요소 - 레이아웃 속성의 값입니다.

참고: 모든 브라우저는 테이블 레이아웃 속성을 지원합니다.

Internet Explorer의 모든 버전(IE8 포함)은 "inherit" 속성 값을 지원하지 않습니다! ! !

5 이론은 실천만큼 좋지 않고 코드는 통한다

아무리 말을 많이 해도 코드를 보면 이해가 더 빠르다~ 이 밤나무 같이 보시죠 ↓↓↓

(모두가 코드를 읽기 쉽도록 CSS와 HTML 코드를 함께 작성하겠습니다)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>table-layout属性测试</title>
        <style type="text/css">
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table class="tb1" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
        <br />
        <table class="tb2" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
    </body>
</html>

로그인 후 복사

실행하면 다음 그림이 표시됩니다.