How to set the table border to a single line border in css? (detailed code explanation)

How to set the table border to a single line border? This article will introduce to you a CSS method to set the border of a table to a single-line border. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First let’s take a look at the default effect after adding a border to the table:

table,table  td{
	border: 1px solid #000;
}
table  td{
	padding: 10px 30px;
}

It can be seen that the table is double-lined It is displayed in the form, so how to make the table appear on the html page with a single-line border? Below we will use a simple code example to explain a method of setting a single-line border in a table.

Introduction to the method of setting single-line borders in css:

We first need to create a table table on the html page. The code is as follows:

<table>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>

Rendering:

#The table has been created. Now let’s see how to add a single-line border to the table using css.

1. First, add the left border and top border to the outer border of the entire table.

table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

2. After adding each cell in the table Add the bottom border and right border to the cell

table td {
	padding: 10px 30px;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}

3. Remove the gap of the cell

table {
	width: 200px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-spacing: 0;/*去掉单元格间隙*/
}

Description:

border-spacing attribute: You can set the distance between the borders of adjacent cells (Border Separation mode only).

When we set border-spacing: 0;, it means that the distance between the borders (horizontal and vertical directions) of each adjacent cell in the table is 0.

Rendering:

Summary: The above is an implementation method of the single-line border of the css table table introduced in this article. I hope it can be useful to everyone. Learning helps. For more related tutorials, please visit: CSS Basics Video Tutorial, HTML Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of How to set the table border to a single line border in css? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!