CSS的table-layout屬性的用法實例詳解

本文主要跟大家分享table-layout屬性的用法， tableLayout屬性用來顯示表格單元格、行、列的演算法規則。本文透過實例程式碼為大家介紹了CSS的table-layout屬性的用法，需要的朋友參考下吧，希望能幫助大家。

前言：

今天來跟大家詳細說一下table-layout屬性的用法。  

 /*eg:设置表格布局算法*/
 table{
     table-layout:fixed;
 }

***本文關鍵字：table-layout屬性值、定義與用法、固定表格版面配置、自動表格版面配置。

1定義與用法

 tableLayout屬性用來顯示表格儲存格、行、列的演算法規則。

 ①此屬性指定了完成表格佈局時所使用的佈局演算法。

 ②固定佈局演算法比較快，但彈性不強。

 ③自動佈局演算法比較慢，卻更能反映傳統的HTML表。

2固定表格佈局

 ①與自動表格佈局相比，允許瀏覽器更快地對錶格進行佈局；

 ②其水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、儲存格間距、而與儲存格的內容無關；

 ③透過使用固定表格佈局，使用者代理程式在接收到第一行後就可以顯示表格。

3自動定表格佈局

 ①其列的寬度是由列單元格中沒有折行的最寬的內容設定的；

 ②由於其需要在確定最終的佈局之前訪問表格中的所有內容，此演算法有時會需要較長時間。

4table-layout屬性值

  ①automatic：（預設值）列寬度由儲存格內容設定；

 ②fixed: 列寬由表格寬度和列寬度設定;

 ③inherit：規定應該從父元素繼承table-layout屬性的值。

附註：所有瀏覽器都支援 table-layout 屬性。

任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"！ ！ ！

5理論不如實踐，程式碼走起

 說的再多，不如看程式碼理解的快~下面大家一起來看這個栗子↓↓↓

（為了大家方便看程式碼，CSS和HTML程式碼我就寫在一塊了）

nbsp;html>

    
        <meta>
        <title>table-layout属性测试</title>
        <style>
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    
    
        

                                                                                     

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbb

ccc

        
                                                                                              

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbb

ccc

    

運行後，你會看到如下圖：

#這裡我要說明一下，也許你的瀏覽器夠寬、也許你的單元格里的內容不夠多，可能會看不出來二者的效果，這時候你需要縮小瀏覽器寬度或者增加單元格里的內容，就會看出二者屬性值的不同效果啦~~~

相關推薦：

CSS使用table-layout:fixed後導致單元格寬度不受控制的問題解決

CSS：table-layout表格佈局詳解

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

以上是CSS的table-layout屬性的用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！