今天要跟大家詳細說一下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屬性的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
