CSS：table-layout屬性的作用與使用詳解
- 黄舟原創
- 2017-06-30 13:33:241963瀏覽
以前看過不少css的用法，但對於一些不叫少用的屬性沒有怎麼看過，今天在經典上看貼，發現了一個對“怎麼用CSS強制TD不換行?”話題的討論，發現了table-layout這個屬性的使用詳解，先貼出來內容：
語法：
table-layout : auto | fixed
取值：
auto : 預設值。預設的自動演算法。佈局將基於各單元格的內容。表格在每個單元格內所有內容讀取計算之後才會顯示出來
fixed : 固定佈局的演算法。在這個演算法中，表格和列的寬度取決於 col 物件的寬度總和，假如沒有指定，則會取決於第一行每個單元格的寬度。假如表格沒有指定寬度( width )屬性，則表格被呈現的預設寬度為 100% 。
說明：
設定或檢索表格的佈局演算法。
你可以透過此屬性改善表格呈現效能。此屬性導致IE以一次一行的方式呈現表格內容從而提供給資訊使用者更快的速度。此屬性依據此下順序使用其中一種方式佈置表格欄寬度：
使用 col 或 colGroup 物件的寬度( width )屬性資訊。
使用表格第一行內的儲存格的寬度( width )資訊。
依據表格列數等分錶格寬度。而不考慮表格內容的實際寬度。
假如儲存格的內容超過了列寬度，內容將會被換行。若無法換行，內容會被裁切。假如此屬性被設定為 fixed ，則 overflow 能夠被用來控制處理溢出單元格( td )寬度的內容。假如表格行高度被指定了，那麼換行的內容如果超出了指定表格行高度也會在縱向上被裁切。
設定此屬性值為 fixed ，有助於提升表格效能。對於長表格效果尤其顯著。
設定表格行高可以進一步提高呈現速度，瀏覽器不需要偵測行內每一個儲存格內容去確定行高就可以開始解析以及呈現。
此屬性對於 currentStyle 物件而言是唯讀的。對於其他物件而言是可讀寫的。
對應的腳本特性為 tableLayout 。
注意到以下幾點：
1，你可以透過此屬性改善表格呈現效能。此屬性導致IE以一次一行的方式呈現表格內容從而提供給資訊使用者更快的速度。
2，設定此屬性值為 fixed ，有助於提高表格效能。對於長表格效果尤其顯著。
3，設定表格行高可以進一步提高呈現速度，瀏覽器不需要偵測行內每一個儲存格內容去確定行高就可以開始解析以及呈現。
────────────────────────────────────────────────── －－－－－
這個特性對於長表格顯示速度及效果來說時非常有用的。可以用來改善表格效能！
對於作者的問題也比較有意思，要求如下：
1,在TD裡,不要出現nowrap屬性,要想辦法把nowrap放到CSS裡.
2,TD裡,不允許有折行,超過的部份要隱藏!
最終實作方法（注意這裡不能加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中文網其他相關文章！