Home > Article > Web Front-end > How to customize table style in CSS3

How to customize table style in CSS3

清浅Original: 2018-12-17 10:39:204946browse

In CSS3, you can customize the table style by setting the pseudo element nth-child (n) to the element, where n can be a numerical value, keyword or formula

During the development process, we often encounter some table style requirements, such as making the first or last row in the table display different styles, or making the odd or even rows in the table display different background colors, etc. Etc., we can achieve these effects through the pseudo-class selector in CSS3. Next, we will introduce it in detail in the article, which has certain reference value. I hope it will be helpful to everyone.

【Recommended course: CSS3 course】

##:nth-child(n) selector

:nth-child(n) selector is used to match elements that belong to its parent element The Nth child element, regardless of the data type of N, so we can set N to a number, keyword or formula

Basically all mainstream browsers support this attribute.

HTML code:

<style>
		table{
	font-size:16px;
	color:#333333;
	border-collapse: collapse;/*设置表格的边框是否被合并为一个单一的边框*/
		}
	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>

Rendering:

（ 1) Directly specify a certain row

You can directly add the specified number of table rows to change the background color in the brackets of the pseudo element

Example: Change the number of the second row in the table The background color is set to gray, which can be set by the following code

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

Effect picture:

Image 2.jpg

(2) By setting the multiple Change the background color of the table

Example: Set the multiple of 2 in the table to RGB(189,215,238) color, the code is as follows

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

The effect picture is as follows

Image 3.jpg

(3) Set by formula

Example: Set the background color for n 1 row number in the table

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

The effect is as follows

Image 4.jpg

Case Analysis: Using the :nth-child(n) selector to achieve alternate row discoloration of the table

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

Rendering:

How to customize table style in CSS3

Summary: The above is the entire content of this article. I hope that through this article, everyone can have an understanding of CSS3 setting table background color.

The above is the detailed content of How to customize table style in CSS3. For more information, please follow other related articles on the PHP Chinese website!

css3 html 数据类型选择器伪类伪元素

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between ID selector and class selector?Next article：What is the difference between ID selector and class selector?

See more

How to customize table style in CSS3

Related articles