CSS: table-layout 속성의 역할과 사용에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS: table-layout 속성의 역할과 사용에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-30 13:33:24

원래의

1971명이 탐색했습니다.

이전에 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([&#39;bag&#39;,120],[&#39;name&#39;,200],[&#39;type&#39;,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 중국어 웹사이트의 기타 관련 기사를 참조하세요!