如何用css table-layout屬性

發(fā)布時(shí)間：2020-07-10 16:39:38 來源：億速云閱讀：153 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何用css table-layout屬性，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

css table-layout屬性用于為表設(shè)置表格布局時(shí)所用的布局算法。固定布局算法比較快，但是不太靈活，而自動(dòng)算法比較慢，不過更能反映傳統(tǒng)的 HTML 表。所有瀏覽器都支持 table-layout 屬性。

css table-layout屬性怎么用？

table-layout屬性為表設(shè)置表格布局算法。

語法：

table-layout:automatic|fixed|inherit;

屬性值：

●　automatic：默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。

●　fixed：列寬由表格寬度和列寬度設(shè)定。

●　inherit：規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

說明：該屬性指定了完成表布局時(shí)所用的布局算法。固定布局算法比較快，但是不太靈活，而自動(dòng)算法比較慢，不過更能反映傳統(tǒng)的 HTML 表。

注釋：所有瀏覽器都支持 table-layout 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

css table-layout屬性示例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>

效果圖：

如何用css table-layout屬性

上述就是小編為大家分享的如何用css table-layout屬性了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何用css table-layout屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽