本文主要跟大家分享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:fixed後導致單元格寬度不受控制的問題解決CSS：table-layout表格佈局詳解#CSS：table-layout屬性的作用與使用詳解###### #以上是CSS的table-layout屬性的用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
