테이블너비

의 렌더링 규칙에 대해 테이블 셀 너비의 계산 방법은 크게 두 가지 방법으로 나뉩니다. : 고정 테이블 레이아웃과 자동 테이블 레이아웃, CSS를 자주 작성하는 사람들은 알겠지만, 테이블 열의 너비를 설정해도 작동하지 않거나 고정 너비 없이 렌더링되는 경우가 많습니다. 이것이 정상인가요? 이 두 가지 방법으로 렌더링을 계산하는 방법을 소개하겠습니다.

먼저 몇 가지 공통 변수를 설정합니다.

tableWidth=table width=100%
tableBorderWidth=테이블의 왼쪽 및 오른쪽 테두리 너비
tdBorderWidth=테이블의 왼쪽 및 오른쪽 테두리 너비의 합 열(결합된 테두리는 1px로 계산됨)
tdPadding=모든 열의 왼쪽 및 오른쪽 패딩과
tdWidth=모든 열의 너비 너비가 정의된 열 및
tdLength=열 수

1. 테이블 레이아웃 고정, 테이블 추가 -layouttable-layout:fixed

ps: 고정 테이블 레이아웃에서 테이블 열의 너비는 열 내용과 관련이 없습니다. 열 너비, 표 왼쪽 및 오른쪽 테두리, 열 왼쪽 및 오른쪽 테두리, 열 왼쪽 및 오른쪽 패딩

고정된 테이블 레이아웃을 사용하면 사용자 에이전트는 첫 번째 행을 받은 후 테이블을 표시할 수 있습니다. 첫 번째 행의 너비가 적용됩니다. 열의 너비는 계산 결과가 음수이면 0입니다. = (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength

1입니다. 정의되지 않음

각 열의 너비는 테이블 너비에 균등하게 분포됩니다.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. 모든 열 너비의 합은 너비가 설정되어 있습니다. 테이블 너비(tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

각 열의 너비는 전체 너비에 걸쳐 균등하게 분배됩니다. 테이블의 너비는 정의된 너비입니다.

3. 모든 항목에는 정의된 너비가 있으며, 모든 열 너비의 합이 테이블 너비(tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)보다 큽니다.
각 항목의 너비 열은 자체 정의됩니다. 너비는 모든 열의 너비의 합입니다(테이블에서 정의한 너비를 초과함)

th1 th2 th3 th4 th5 th6 th7 th8 th9 th10

row1row1row1row1row1row1row1row1 row2row2row2row2row2row2row2row2 row3 row4row4row4row4row4row4row4row4 row5row5row5row5row5row5row5row5 row6 row7row7row7row7row7row7row7row7 row8row8row8row8row8row8row8row8 row9row9row9row9row9row9row9row9 row10row10row10row10row10row10row10

4. th 부분의 너비가 결정되고 th 부분의 너비도 동시에 결정됩니다. 그러면 열의 너비가 테이블 너비보다 작아집니다(tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

ps: 어두운 회색 배경의 열은 너비가 정의된 열입니다

너비가 정의된 열 너비는 정의된 너비가 없는 다른 열의 너비에서 테이블 전체 너비를 뺀 너비입니다. 정의된 너비의 합을 계산하고 균등하게 분배합니다

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

5. th 부분은 너비를 결정하고 동시에 해당 너비를 갖는 열의 너비는 다음과 같습니다. 결정된 값이 테이블 너비보다 큽니다(tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

ps: 어두운 회색 배경의 열은 정의된 너비가 있는 열입니다.

열의 실제 너비 정의된 너비가 있는 다른 열의 너비는 정의된 너비의 합계를 뺀 테이블의 전체 너비이며, 평균 분포 이후의 너비는 0보다 작습니다. 기타너비가 정의되지 않은 열의 너비는 0입니다

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. 자동 테이블 레이아웃, 테이블 설정 table-layout:auto ( 속성 기본값은 auto)

각 열의 너비는 셀 너비에 따라 결정됩니다. 행의 너비가 설정됩니다. 이 알고리즘은 최종 레이아웃을 결정하기 전에 테이블의 모든 열을 방문해야 하기 때문에 매우 느립니다.

각 열의 너비는 내부 내용에 따라 완전히 결정됩니다.

2. 모두 최소 너비를 정의하며, 내용을 기준으로 계산된 모든 열의 합이 테이블 너비보다 작습니다

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

각 열의 너비는 먼저 정의된 최소 너비보다 작을 수 없도록 내용을 계산하고 초과 너비는 각 열 위에 고르게 분포됩니다.

3. 모두 최소 너비를 정의하며, 내용을 기준으로 계산된 모든 열의 합이 테이블 너비보다 큽니다.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

각 열의 너비는 먼저 콘텐츠 계산을 기반으로 하며, 두 번째로 정의된 최소 너비보다 작을 수 없습니다.

4. 파트 th는 최소 너비를 정의합니다. 내용을 기준으로 계산된 모든 열의 합이 테이블 너비보다 작습니다.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

ps: 어두운 회색 배경의 열은 최소 너비가 정의된 열입니다

각 열의 너비는 먼저 내용을 기반으로 계산되고, 두 번째로 정의된 최소 너비보다 작을 수 없으며, 마지막으로 테이블에서 렌더링되는 너비는 테이블 자체에 정의된 너비보다 작을 수 없습니다.

5. th번째 부분은 최소 너비를 정의하며, 내용을 기준으로 계산된 모든 열의 합이 테이블 너비보다 작습니다.

ps: 어두운 회색 배경의 열은 열의 최소 너비를 정의합니다.

Every 열 너비는 내용을 기준으로 먼저 계산되며, 두 번째로 정의된 최소 너비보다 작을 수 없습니다.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10