CSS: table-layout 속성의 역할과 사용에 대한 자세한 설명
- 黄舟원래의
- 2017-06-30 13:33:241912검색
이전에 CSS의 사용법을 많이 보았지만 덜 사용된다고 불리는 일부 속성에 대해서는 많이 본 적이 없습니다. 오늘 Classic에 대한 게시물을 읽고 "CSS를 사용하여 TD를 강제하는 방법"이라는 주제에 대한 토론을 찾았습니다. not towrap?' 그리고 이제 table-layout 사용에 대한 자세한 설명이 있으므로 콘텐츠를 먼저 게시해 주세요:
Syntax:
table-layout: auto |fixed
값:
auto : 기본값입니다. 기본 자동 알고리즘. 레이아웃은 각 셀의 내용을 기반으로 합니다.
고정: 고정 레이아웃 알고리즘. 각 셀의 모든 내용을 읽고 계산할 때까지 테이블이 표시되지 않습니다. 이 알고리즘에서 테이블과 열의 너비는 col 개체의 너비의 합에 따라 달라지며, 지정하지 않은 경우 첫 번째 행의 각 셀 너비에 따라 달라집니다. 테이블에서 너비(width) 속성을 지정하지 않으면 테이블은 기본 너비 100%로 렌더링됩니다.
설명:
테이블의 레이아웃 알고리즘을 설정하거나 검색합니다.
이 속성을 통해 테이블 렌더링 성능을 향상시킬 수 있습니다. 이 속성을 사용하면 IE는 테이블 내용을 한 번에 한 행씩 렌더링하여 정보 사용자에게 더 빠른 속도를 제공합니다. 이 속성은 다음 방법 중 하나를 사용하여 테이블 열 너비를 배치합니다.
col 또는 colGroup 개체의 너비(너비) 속성 정보를 사용합니다.
표의 첫 번째 행에 있는 셀의 너비 정보를 사용하세요.
테이블 열 수에 따라 테이블 너비를 균등하게 나눕니다. 테이블 내용의 실제 너비에 관계없이.
셀 내용이 열 너비를 초과하면 내용이 줄바꿈됩니다. 줄 바꿈이 불가능하면 내용이 잘립니다. 이 속성을 고정으로 설정하면 overflow를 사용하여 셀 너비(td)를 초과하는 콘텐츠 처리를 제어할 수 있습니다. 테이블 행 높이가 지정된 경우 지정된 테이블 행 높이를 초과하면 래핑된 콘텐츠가 세로로 잘립니다.
테이블 성능을 향상하려면 이 속성 값을 고정으로 설정하세요. 이 효과는 긴 테이블의 경우 특히 중요합니다.
테이블 행 높이를 설정하면 브라우저가 구문 분석 및 렌더링을 시작하기 전에 행 높이를 결정하기 위해 행의 각 셀 내용을 감지할 필요가 없습니다.
이 속성은 currentStyle 개체에 대한 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 tableLayout입니다.
다음 사항에 유의하세요.
1. 이 속성을 통해 테이블 렌더링 성능을 향상시킬 수 있습니다. 이 속성을 사용하면 IE는 테이블 내용을 한 번에 한 행씩 렌더링하여 정보 사용자에게 더 빠른 속도를 제공합니다.
2. 테이블 성능을 향상하려면 이 속성 값을 고정으로 설정하세요. 이 효과는 긴 테이블의 경우 특히 중요합니다.
3. 테이블 행 높이를 설정하면 브라우저가 구문 분석 및 렌더링을 시작하기 전에 행 높이를 결정하기 위해 행의 각 셀 내용을 감지할 필요가 없습니다.
-------------------------------------- ---------- ---
이 기능은 긴 테이블 표시 속도와 효과에 매우 유용합니다. 테이블 성능을 향상시키는 데 사용할 수 있습니다!
저자의 질문도 꽤 흥미롭습니다.
1. TD에서는 nowrap 속성이 없어야 합니다.
2. 허용됩니다. ID를 숨겨야 합니다.
최종 구현 방법(여기에 DTD를 추가할 수 없습니다. 그렇지 않으면 구현되지 않습니다. 이유는 모르겠습니다):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.aa{
table-layout : fixed;
}
td{
overflow:hidden;
height:22px;
}
</style>
</head>
<body>
<!-- var grid1=new JGrid(null,300);
grid1.create(); var fldsList=new Array(['bag',120],['name',200],['type',100]);
grid1.createTitle(fldsList); grid1.tackData("dataLayer") //-->
<table class="aa" border="1" cellpadding="0" cellspacing="0" bordercolor="#F9F9F9" id="dataLayer">
<colgroup>
<col width="119" />
<col width="199" />
<col width="99" />
</colgroup>
<tbody>
<tr basestyle="oRowLine2">
<td>J2SE</td>
<td>Java 2 Standard Edition </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>J2EE</td>
<td>Java 2 Enterprise Edition </td>
<td> </td>
</tr>
<tr basestyle="oRowLine2">
<td>J2ME</td>
<td>Java 2 Micro Edition </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>GPS</td>
<td>Global Positioning System </td>
<td>全球定位系统</td>
</tr>
<tr basestyle="oRowLine2">
<td>CDMA</td>
<td>Code Division Multiple Access </td>
<td>码分多址</td>
</tr>
<tr basestyle="oRowLine1">
<td>SMS</td>
<td>Short Message Service </td>
<td>短信息服务</td>
</tr>
<tr basestyle="oRowLine2">
<td>BREW</td>
<td>Binary Runtime Environment for Wireless </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>Symbian</td>
<td> </td>
<td> </td>
</tr>
<tr basestyle="oRowLine2">
<td>Windows Mobile Smartphone </td>
<td> </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>MIDlet</td>
<td> </td>
<td>按MIDP规范开发的J2ME应用程序</td>
</tr>
<tr basestyle="oRowLine2">
<td>MIDP</td>
<td>Mobile Information Device Profile </td>
<td>移动信息设备框架</td>
</tr>
<tr basestyle="oRowLine1">
<td>Profile</td>
<td> </td>
<td>框架/简表</td>
</tr>
<tr basestyle="oRowLine2">
<td>CLDC</td>
<td>Connected Limited Device Configuration </td>
<td>标准配置</td>
</tr>
<tr basestyle="oRowLine1">
<td>CDC</td>
<td>Connected Device Configuration </td>
<td> </td>
</tr>
<tr basestyle="oRowLine2">
<td>KVM</td>
<td>K virtual Machine </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>SDK</td>
<td>Software Development Kit </td>
<td>软件开发工具包</td>
</tr>
<tr basestyle="oRowLine2">
<td>JAR</td>
<td>Java ARchive </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>JAD</td>
<td>Java Application Descriptor </td>
<td>应用程序描述符</td>
</tr>
<tr basestyle="oRowLine2">
<td>GCF</td>
<td>General Connection Framework </td>
<td> </td>
</tr>
<tr basestyle="oRowLine1">
<td>RMS</td>
<td>Record Management System </td>
<td>记录管理系统</td>
</tr>
<tr basestyle="oRowLine2">
<td>Sprite</td>
<td> </td>
<td>精灵</td>
</tr>
<tr basestyle="oRowLine1">
<td> </td>
<td> </td>
<td>冲突检查</td>
</tr>
<tr basestyle="oRowLine2">
<td> </td>
<td> </td>
<td>平铺图层</td>
</tr>
</tbody>
</table>
</body>
</html>위 내용은 CSS: table-layout 속성의 역할과 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!