집 > 기사 > 웹 프론트엔드 > CSS 테이블 레이아웃 속성 사용

CSS 테이블 레이아웃 속성 사용

不言원래의: 2018-06-25 16:42:142486검색

오늘은 table-layout 속성을 사용하는 방법을 자세히 알려드리겠습니다. tableLayout 속성은 테이블 셀, 행, 열의 알고리즘 규칙을 표시하는 데 사용됩니다. 이 글에서는 CSS의 table-layout 속성 사용법을 예제 코드를 통해 모두에게 소개합니다. 필요한 친구들은 참고하면 됩니다.

서문:

오늘은 CSS의 table-layout 속성 사용법에 대해 자세히 설명하겠습니다. 테이블 레이아웃 속성.

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

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

1 정의 및 사용법

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

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

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

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

2 고정 테이블 레이아웃

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

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

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

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

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

②최종 레이아웃을 결정하기 전에 테이블에 액세스해야 하기 때문에 이 알고리즘은 때로는 시간이 오래 걸릴 수 있습니다.

4table-layout 속성 값

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

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

③inherit: 열 너비가 다음에서 시작되어야 함을 지정합니다. 상위 요소는 table-layout 속성의 값을 상속받습니다.

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

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

5 그냥 한 번에 적어주세요)

<!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>

실행 후 다음 그림을 볼 수 있습니다:

여기서 설명하고 싶습니다. 아마도 귀하의 브라우저가 충분히 넓을 수도 있고, 어쩌면 귀하의 셀일 수도 있습니다. 내용이 충분하지 않으면 두 속성의 효과를 볼 수 없을 수도 있습니다. 이때 브라우저의 너비를 줄이거나 셀의 내용을 늘려야 두 속성의 다른 효과를 볼 수 있습니다. 가치관~~

그렇습니다. 이 글의 전체 내용이 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

CSS 테이블 레이아웃 속성 사용

관련 기사