CSS:table-layout屬性的作用與使用詳解

來源:互聯網
上載者:User
以前看過不少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>&nbsp;</td>    </tr>    <tr basestyle="oRowLine1">      <td>J2EE</td>      <td>Java 2 Enterprise Edition </td>      <td>&nbsp;</td>    </tr>    <tr basestyle="oRowLine2">      <td>J2ME</td>      <td>Java 2 Micro Edition </td>      <td>&nbsp;</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>&nbsp;</td>    </tr>    <tr basestyle="oRowLine1">      <td>Symbian</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr basestyle="oRowLine2">      <td>Windows Mobile Smartphone </td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr basestyle="oRowLine1">      <td>MIDlet</td>      <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>    </tr>    <tr basestyle="oRowLine2">      <td>KVM</td>      <td>K virtual Machine </td>      <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>    </tr>    <tr basestyle="oRowLine1">      <td>RMS</td>      <td>Record Management System </td>      <td>記錄管理系統</td>    </tr>    <tr basestyle="oRowLine2">      <td>Sprite</td>      <td>&nbsp;</td>      <td>精靈</td>    </tr>    <tr basestyle="oRowLine1">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>衝突檢查</td>    </tr>    <tr basestyle="oRowLine2">      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>平鋪圖層</td>    </tr>  </tbody></table></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.