css中table-layout屬性有什么用

小編給大家分享一下css中table-layout屬性有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在廬山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),廬山網(wǎng)站建設(shè)費(fèi)用合理。

一、什么是table-layout屬性？

1.定義

table-layout屬性用來顯示表格單元格、行、列的算法規(guī)則

2.用法

table-layout: automatic || fixed || inherit;

automatic（auto）：（默認(rèn)值）列寬度由單元格內(nèi)容設(shè)定；

fixed: 列寬由表格寬度和列寬度設(shè)定；

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

3.table-layout屬性說明

  • 該屬性指定了完成表布局時(shí)所用的布局算法。

  • 固定布局（fixed）算法比較快，但靈活性不強(qiáng)。

  • 自動(dòng)布局（auto）算法比較慢，卻更能反映傳統(tǒng)的HTML表。

注：

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

二、兩種布局方法介紹（自動(dòng)布局與固定布局）

1.自動(dòng)布局（auto）

在自動(dòng)布局中，列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的，所以設(shè)置單元格的寬度是沒有效的。

自動(dòng)布局的算法有時(shí)會(huì)較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內(nèi)容。

代碼實(shí)例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自動(dòng)布局</title>
		<style>
			table.ex {table-layout: auto}
		</style>
	</head>

	<body>
		<table class="ex" border="1" width="100%">
			<tr>
				<td width="100px">td里的內(nèi)容，我會(huì)全部顯示:我是測(cè)試代碼我是測(cè)試代碼我是測(cè)試代碼我是測(cè)試代碼我是測(cè)試代碼我是測(cè)試代碼我是測(cè)試代碼</td>
				<td width="100px">我是測(cè)試代碼</td>
			</tr>
		</table>

	</body>

</html>

效果圖：

css中table-layout屬性有什么用

如上圖所示：在自動(dòng)布局中，td標(biāo)簽的寬高會(huì)隨著td標(biāo)簽里內(nèi)容的多少而變化。

2.固定布局（fixed）

與自動(dòng)布局相比，固定布局允許瀏覽器更快地對(duì)表格進(jìn)行布局；其水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距，而與單元格的內(nèi)容無關(guān)；通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。

代碼實(shí)例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定布局</title>
		<style>
			table.ex {table-layout: fixed}
		</style>
	</head>
	<body>
		<table class="ex" border="1" width="500px">
			<tr>
				<td width="">1000000000000000000000000000000</td>
				<td width="">我是測(cè)試代碼</td>
			</tr>
		</table>
	</body>
</html>

效果圖：

css中table-layout屬性有什么用

如上圖可以看出：把table表格的寬度設(shè)置為500px后，表格里的兩個(gè)td標(biāo)簽（單元格）的寬度自動(dòng)平分分配，使得第一個(gè)td標(biāo)簽（單元格）里超出寬度的部分內(nèi)容溢出到第二個(gè)td標(biāo)簽（單元格）。

在固定布局中,關(guān)于td標(biāo)簽（單元格）的寬度有兩點(diǎn)說明：

  1. 如果指定了td標(biāo)簽（單元格）的寬度，則會(huì)按指定的寬度限定每個(gè)td標(biāo)簽（單元格）寬度，跟內(nèi)容無關(guān)（如果指定的是比例，會(huì)永遠(yuǎn)保持這個(gè)比例），這樣就可能出現(xiàn)內(nèi)容飄到td標(biāo)簽（單元格）之外的情況。

  2. 如果沒有指定td標(biāo)簽（單元格）的寬度，則會(huì)根據(jù)table的總寬度平分到每個(gè)td標(biāo)簽（單元格）。

注：

一般情況下如果table表格中的內(nèi)容是中文，內(nèi)容過長(zhǎng)時(shí)文字都會(huì)自動(dòng)換行。但如果table表格中的內(nèi)容是英文或數(shù)字，內(nèi)容過長(zhǎng)時(shí)文字就會(huì)飄到單元格之外，也就是內(nèi)容不會(huì)自動(dòng)換行，這時(shí)候只要配合css3中的屬性word-wrap:break-word;和word-break:break-all;一起使用，就可以解決問題了。

看完了這篇文章，相信你對(duì)css中table-layout屬性有什么用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：css中table-layout屬性有什么用
網(wǎng)站地址：http://bm7419.com/article10/gossdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)