詳解CSS的table-layout屬性的用法
我要評(píng)論前言：
今天來(lái)和大家詳細(xì)說(shuō)一下table-layout屬性的用法。
/*eg:設(shè)置表格布局算法*/
table{
table-layout:fixed;
}
***本文關(guān)鍵詞：table-layout屬性值、定義和用法、固定表格布局、自動(dòng)表格布局。
1定義和用法
tableLayout屬性用來(lái)顯示表格單元格、行、列的算法規(guī)則。
①該屬性指定了完成表布局時(shí)所用的布局算法。
②固定布局算法比較快，但靈活性不強(qiáng)。
③自動(dòng)布局算法比較慢，卻更能反映傳統(tǒng)的HTML表。
2固定表格布局
①與自動(dòng)表格布局相比，允許瀏覽器更快地對(duì)表格進(jìn)行布局；
②其水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距、而與單元格的內(nèi)容無(wú)關(guān)；
③通過(guò)使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。
3自動(dòng)定表格布局
①其列的寬度是由列單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定的；
②由于其需要在確定最終的的布局之前訪問(wèn)表格中的所有內(nèi)容，此算法有時(shí)會(huì)需要較長(zhǎng)時(shí)間。
4table-layout屬性值
①automatic：（默認(rèn)值）列寬度由單元格內(nèi)容設(shè)定；
②fixed: 列寬由表格寬度和列寬度設(shè)定；
③inherit：規(guī)定應(yīng)該從父元素繼承table-layout屬性的值。
注：所有瀏覽器都支持 table-layout 屬性。
任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"?。?！
5理論不如實(shí)踐，代碼走起
說(shuō)的再多，不如看代碼理解的快~下面大家一起來(lái)看這個(gè)栗子↓↓↓
（為了大家方便看代碼，CSS和HTML代碼我就寫(xiě)在一塊了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table-layout屬性測(cè)試</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>
運(yùn)行后，你會(huì)看到如下圖所示：
這里我要說(shuō)明一下，也許你的瀏覽器足夠?qū)挕⒁苍S你的單元格里的內(nèi)容不夠多，可能會(huì)看不出來(lái)二者的效果，這時(shí)候你需要縮小瀏覽器寬度或者增加單元格里的內(nèi)容，就會(huì)看出二者屬性值的不同效果啦~~~
相關(guān)文章
固定 table寬度 table-layout: fixed
如果單元格中的文本超過(guò)寬度限制，就會(huì)自動(dòng)換行，高度自動(dòng)增高，導(dǎo)致整個(gè)表格的樣式參差不齊，不過(guò)可以通過(guò)禁用文本換行來(lái)解決這個(gè)問(wèn)題2014-05-15表格設(shè)置table-layout:fixed后對(duì)單元格寬度設(shè)置無(wú)效
在對(duì)設(shè)置表格設(shè)置table-layer:fixed樣式后，發(fā)現(xiàn)表格中有一行合并過(guò)，其它沒(méi)有合并的行的列寬會(huì)平均化，對(duì)列寬的設(shè)置會(huì)失效，下面有詳細(xì)的解決方法，大家可以學(xué)習(xí)學(xué)習(xí)2014-04-14css table-layout屬性顯示表格單元格、行、列的算法規(guī)則
之所以拿出這個(gè)來(lái)說(shuō)事，是因?yàn)榭吹揭黄恼耇ips for Authoring Fast-loading HTML Pages，提到了table-layout,本文詳細(xì)介紹tableLayout 屬性算法規(guī)則，需要了解的朋友可以2012-12-12