CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)
- 青灯夜游원래의
- 2018-09-15 11:45:363105검색
프런트엔드 웹페이지 개발에서는 전체 페이지 작성을 빠르게 완료하기 위해 일부 CSS 레이아웃 방법을 자주 사용합니다. CSS 레이아웃 방법에는 여러 가지가 있으며 테이블 레이아웃은 그 중 하나입니다. 오늘은 테이블 레이아웃의 css 테이블 레이아웃 속성에 대해 설명하고 테이블의 두 가지 레이아웃 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 테이블 레이아웃 속성이란 무엇인가요?
1. 정의
table-layout 속성은 테이블 셀, 행 및 열의 알고리즘 규칙을 표시하는 데 사용됩니다
#🎜 🎜#2. 사용법table-layout: automatic || fixed || inherit;automatic(자동): (기본값) 열 너비는 셀 내용에 따라 설정됩니다. fixed: 열 너비는 테이블 너비에 따라 결정됩니다. 및 열 너비 설정 inherit: 테이블 레이아웃 속성의 값이 상위 요소에서 상속되도록 지정합니다. 3.table-layout 속성 설명
- 이 속성은 테이블 레이아웃을 완성하는 데 사용되는 레이아웃 알고리즘을 지정합니다.
- 고정 레이아웃(고정) 알고리즘은 더 빠르지만 그다지 유연하지는 않습니다.
- 자동 레이아웃(자동) 알고리즘은 느리지만 기존 HTML 테이블을 더 잘 반영합니다.
2. 두 가지 레이아웃 방법 소개(자동 레이아웃과 고정 레이아웃)
1. 자동 레이아웃(자동)
자동 레이아웃에서는 열의 너비가 열 셀에서 줄 바꿈 없이 가장 넓은 내용으로 설정되므로 셀 너비가 유효하지 않습니다. 자동 레이아웃 알고리즘은 최종 레이아웃을 결정하기 전에 테이블의 모든 콘텐츠에 액세스해야 하기 때문에 때때로 속도가 느려질 수 있습니다. 코드 예:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动布局</title>
<style>
table.ex {table-layout: auto}
</style>
</head>
<body>
<table class="ex" border="1" width="100%">
<tr>
<td width="100px">td里的内容，我会全部显示:我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码</td>
<td width="100px">我是测试代码</td>
</tr>
</table>
</body>
</html>렌더링:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定布局</title>
<style>
table.ex {table-layout: fixed}
</style>
</head>
<body>
<table class="ex" border="1" width="500px">
<tr>
<td width="">1000000000000000000000000000000</td>
<td width="">我是测试代码</td>
</tr>
</table>
</body>
</html>렌더링: 
td 라벨(셀) 너비에 대한 두 가지 참고사항(셀):
- #🎜 🎜 #td 라벨(셀)의 너비를 지정하면 내용에 관계없이 각 td 라벨(셀)의 너비가 지정된 너비로 제한됩니다. (비율을 지정하면 이 비율이 영원히 유지됩니다.) 이므로 가능합니다. 내용이 td 라벨(셀) 외부에 떠 있는 상황이 있습니다.
- td 라벨(셀)의 너비를 지정하지 않으면 테이블 전체 너비에 따라 각 td 라벨(셀)에 균등하게 나누어집니다. .
일반적으로 표의 내용이 중국어인 경우 내용도 너무 긴 텍스트가 자동으로 줄바꿈됩니다. 하지만 표의 내용이 영어나 숫자인 경우, 내용이 너무 길면 텍스트가 셀 외부에 떠 있게 됩니다. 즉, 내용이 자동으로 줄 바꿈되지 않습니다. 이때
속성을 사용하세요. CSS3의 word-wrap: break-word;및 word-break:break-all;을 함께 사용하여 문제를 해결할 수 있습니다.
위 내용은 CSS의 테이블 레이아웃 속성은 무엇을 합니까? 테이블의 두 가지 레이아웃 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.