ホームページ > 記事 > ウェブフロントエンド > CSS: table-layout 属性の役割と使用法の詳細な説明
CSS: table-layout 属性の役割と使用法の詳細な説明
- 黄舟オリジナル
- 2017-06-30 13:33:241972ブラウズ
私はこれまで CSS の使用法をたくさん見てきましたが、あまり使用されていないと呼ばれるいくつかのプロパティについてはあまり見たことがありませんでした。今日 Classic に関する投稿を読んで、「CSS を使用して強制する方法」というトピックに関するディスカッションを見つけました。 TD はラップしませんか?」と表示され、table-layout の使用方法について詳しく説明したので、最初にコンテンツを投稿してください:
Syntax:
table-layout: auto | fixed
Value:
auto: デフォルト値。デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づきます。各セルの内容がすべて読み取られて計算されるまで、テーブルは表示されません。
固定: 固定レイアウト アルゴリズム。このアルゴリズムでは、テーブルと列の幅は、col オブジェクトの幅の合計、または指定されていない場合は最初の行の各セルの幅に依存します。テーブルで幅 (width) 属性が指定されていない場合、テーブルはデフォルトの幅 100% でレンダリングされます。
説明:
テーブルのレイアウトアルゴリズムを設定または取得します。
この属性を通じてテーブルのレンダリングのパフォーマンスを向上させることができます。このプロパティにより、IE はテーブルの内容を一度に 1 行ずつ表示するため、情報ユーザーの処理速度が向上します。このプロパティは、次のいずれかの方法を使用してテーブルの列幅をレイアウトします:
col またはcolGroup オブジェクトの幅 (width) 属性情報を使用します。
表の最初の行のセルの幅情報を使用します。
テーブルの列数に応じてテーブルの幅を均等に分割します。テーブルコンテンツの実際の幅には関係ありません。
セルの内容が列幅を超える場合、内容は折り返されます。行の折り返しが不可能な場合、コンテンツは切り取られます。このプロパティが fix に設定されている場合、 overflow を使用して、セルの幅 ( td ) をオーバーフローするコンテンツの処理を制御できます。テーブルの行の高さが指定されている場合、ラップされたコンテンツは、指定されたテーブルの行の高さを超えると垂直方向に切り取られます。
テーブルのパフォーマンスを向上させるには、この属性値を固定に設定します。この効果は、長いテーブルの場合に特に顕著です。
テーブルの行の高さを設定すると、ブラウザは解析とレンダリングを開始する前に行の各セルの内容を検出して行の高さを決定する必要がなくなります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はtableLayoutです。
次の点に注意してください:
1. この属性を通じてテーブルのレンダリングのパフォーマンスを向上させることができます。このプロパティにより、IE はテーブルの内容を一度に 1 行ずつ表示するため、情報ユーザーの処理速度が向上します。
2. テーブルのパフォーマンスを向上させるために、この属性値を固定に設定します。この効果は、長いテーブルの場合に特に顕著です。
3. テーブルの行の高さを設定すると、ブラウザは解析とレンダリングを開始する前に行の各セルの内容を検出して行の高さを決定する必要がなくなります。
------------------------------------------------- --------------- ---
この機能は、長いテーブルの表示速度と効果に非常に役立ちます。テーブルのパフォーマンスを向上させるために使用できます。
要件は次のとおりです:
TD では、nowrap 属性を使用しないでください。
2. TD では、改行はありません。 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 中国語 Web サイトの他の関連記事を参照してください。