首頁  >  文章  >  web前端  >  CSS的table-layout屬性的用法

CSS的table-layout屬性的用法

不言
不言原創
2018-06-25 16:42:142536瀏覽

今天要跟大家詳細說一下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>

運行後,你會看到如下圖所示:

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

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

CSS3和jQuery實作跟隨滑鼠方位的Hover特效

CSS3 3D旋轉rotate效果的使用介紹

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn