溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3中自定義表格樣式的方法

發(fā)布時間：2020-08-29 10:33:41 來源：億速云 閱讀：101 作者：小新 欄目：web開發(fā)

CSS3中自定義表格樣式的方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

在CSS3中可以通過給元素設(shè)置偽元素nth-child（n）來實現(xiàn)自定義表格樣式，其中n可以為數(shù)值，關(guān)鍵字或者公式

在開發(fā)過程中，經(jīng)常會碰到一些表格樣式的需求，比如使表格中的第一行或者最后一行來顯示不同的樣式 ，又或者使表格中的奇數(shù)行或者偶數(shù)行顯示不同的背景色等等，這些效果我們可以通過CSS3中的偽類選擇器實現(xiàn)。

CSS3中自定義表格樣式的方法

:nth-child（n）選擇器

:nth-child(n) 選擇器的作用是匹配屬于其父元素的第 N 個子元素，不管N的數(shù)據(jù)類型，所以N我們可以設(shè)置為數(shù)字，關(guān)鍵詞或者是公式

基本上所有的主流瀏覽器都支持這個屬性。

HTML代碼：

<style>
		table{
	font-size:16px;
	color:#333333;
	border-collapse: collapse;/*設(shè)置表格的邊框是否被合并為一個單一的邊框*/
		}
	th{
	border:1px solid #444;
	padding:25px;

	}
	td{
	border:1px solid #444;
	padding: 15px;
	}
	
	</style>
</head>
<body>
	<table>
		<tr>
			<th>示例一</th>
			<th>示例二</th>
			<th>示例三</th>
		</tr>
		<tr>
			<td>test1</td>
			<td>test1</td>
			<td>test1</td>
		</tr>
		<tr>
			<td>test2</td>
			<td>test2</td>
			<td>test2</td>
		</tr>
		<tr>
			<td>test3</td>
			<td>test3</td>
			<td>test3</td>
		</tr>
	</table>

效果圖：

CSS3中自定義表格樣式的方法

（1）直接指定某一行

可以直接在偽元素的括號中添加所指定要改變背景顏色的表格行數(shù)

例：將表格中的第二行的背景顏色設(shè)置為灰色，可通過以下代碼來設(shè)置

tr:nth-child(2)
{
background:gray;
}

效果圖：

CSS3中自定義表格樣式的方法

（2）通過設(shè)置倍數(shù)來改變表格背景顏色

例：將表格中為2的倍數(shù)設(shè)置成RGB(189,215,238)顏色，代碼如下

tr:nth-child(2n)
{
background:rgb(189,215,238);
}

效果圖如下

CSS3中自定義表格樣式的方法

（3）通過公式來設(shè)置

例：將表格中n+1的行數(shù)設(shè)置背景顏色

tr:nth-child(n+3)
{
background:rgb(189,215,238);
}

效果圖如下

CSS3中自定義表格樣式的方法

案例分析：通過:nth-child(n)選擇器來實現(xiàn)表格隔行變色的案例

tr:nth-child(2n)
{
background:rgb(189,215,238);
}
tr:nth-child(2n+1){
	background:rgb(207,238,252);
}

效果圖：

CSS3中自定義表格樣式的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS3中自定義表格樣式的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手