首頁 >web前端 >js教程 >CSS的table-layout屬性的用法實例詳解

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

小云云原創: 2018-01-18 09:05:301639瀏覽

本文主要跟大家分享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程式碼我就寫在一塊了）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>table-layout属性测试</title>
        <style type="text/css">
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table class="tb1" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
        <br />
        <table class="tb2" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
    </body>
</html>

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

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

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

相關文章