關於CSS的table-layout屬性的用法詳解

時間 2019-11-21

標籤關於 css table layout 屬性用法詳解欄目 CSS 简体版

原文原文鏈接

前言： css

今天來和你們詳細說一下table-layout屬性的用法。html

1 /*eg:設置表格佈局算法*/
2 table{
3     table-layout:fixed;
4 }

***本文關鍵詞：table-layout屬性值、定義和用法、固定表格佈局、自動錶格佈局。算法

1定義和用法

tableLayout屬性用來顯示錶格單元格、行、列的算法規則。瀏覽器

①該屬性指定了完成表佈局時所用的佈局算法。ide

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

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

2固定表格佈局

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

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

③經過使用固定表格佈局，用戶代理在接收到第一行後就能夠顯示錶格。代理

3自動定表格佈局

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

②因爲其須要在肯定最終的的佈局以前訪問表格中的全部內容，此算法有時會須要較長時間。

4table-layout屬性值

①automatic：（默認值）列寬度由單元格內容設定；

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

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

注：全部瀏覽器都支持 table-layout 屬性。

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

5理論不如實踐，代碼走起

說的再多，不如看代碼理解的快~下面你們一塊兒來看這個栗子↓↓↓

（爲了你們方便看代碼，CSS和HTML代碼我就寫在一塊了）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>table-layout屬性測試</title>
 6         <style type="text/css">
 7             table.tb1 {
 8                 table-layout: automatic;
 9             }
10             table.tb2 {
11                 table-layout: fixed;
12             }
13         </style>
14     </head>
15     <body>
16         <table class="tb1" border="1" width="100%">
17             <tr>
18                 <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
19                 <td width="40%">bbbbbbbbbbbbb</td>
20                 <td width="40%">ccc</td>
21             </tr>
22         </table>
23         
24         <br />
25         
26         <table class="tb2" border="1" width="100%">
27             <tr>
28                 <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
29                 <td width="40%">bbbbbbbbbbbbb</td>
30                 <td width="40%">ccc</td>
31             </tr>
32         </table>
33     </body>
34 </html>