How to set the distance between table borders in CSS? Use of border-spacing attribute-CSS Tutorial-php.cn

How to set the distance between table borders in CSS? Use of border-spacing attribute

青灯夜游

Release： 2019-05-25 11:11:07

Original

9085 people have browsed it

In CSS, the border-spacing property is used to set the distance between the borders of adjacent cells when the border of the table is in the "separated" state. The following article will show you how to use the border-spacing attribute. I hope it will be helpful to you.

How to set the distance between table borders in CSS? Use of border-spacing attribute

CSS border-spacing property

The border-spacing property will be used when the table border is "detached" , set the horizontal and vertical spacing of row and cell borders. [Video tutorial recommendation: CSS tutorial]

It can have 1~2 length values:

● If all two length values are provided When , the first one acts on the horizontal spacing, and the second one acts on the vertical spacing.

● If only one length value is provided, this value will act on the horizontal and vertical spacing.

Description: The border-spacing attribute has the same effect as the HTML tag attribute cellspacing.

Note: This property only works when the table borders are independent (that is, when the border-collapse property is set to separate).

Examples of using the CSS border-spacing property

The following is a simple code example to see how the border-spacing property sets the table border space Distance:

Example 1: When setting border-collapse: collapse;:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			td,th{
				padding: 5px 20px;
			}
			
			#table1 {
				border-collapse: collapse;
				border-spacing: 15px;
				
			}
		</style>
	</head>

	<body>
		<h2>border-spacing: 15px:</h2>
		<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
		<table id="table1">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>20</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>20</td>
			</tr>
		</table>
	</body>

</html>

Copy after login

Rendering:

How to set the distance between table borders in CSS? Use of border-spacing attribute

Example 2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			td,th{
				padding: 5px 20px;
			}
			
			#table2 {
				border-collapse: separate;
				border-spacing: 15px;
			}
			
			#table3 {
				border-collapse: separate;
				border-spacing: 15px 30px;
			}
		</style>
	</head>

	<body>
		<h2>border-spacing: 15px:</h2>
		<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
		<table id="table2">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>20</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>20</td>
			</tr>
		</table>

		<h2>border-spacing: 15px 30px:</h2>
		<p>使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：</p>
		<table id="table3">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>20</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>20</td>
			</tr>
		</table>

	</body>

</html>

Copy after login

Rendering:

How to set the distance between table borders in CSS? Use of border-spacing attribute

Code Description:

When the border is independent (when the border-collapse attribute is set to separate), border-spacing takes effect; when adjacent edges are merged (when the border-collapse attribute is set to collapse), the border-spacing attribute is invalid.

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to set the distance between table borders in CSS? Use of border-spacing attribute. For more information, please follow other related articles on the PHP Chinese website!