今天給大家詳細說一下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>
運行後,你會看到如所示:
這裡我要說明一下,也許你的瀏覽器足夠寬、也許你的儲存格裡的內容不夠多,可能會看不出來二者的效果,這時候你需要縮小瀏覽器寬度或者增加儲存格裡的內容,就會看出二者屬性值的不同效果啦~~~
以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!