How to remove table borders in css-CSS Tutorial-php.cn

How to remove table borders in css

青灯夜游

Release： 2021-10-12 15:55:32

Original

9798 people have browsed it

Removal method: 1. Add "border:0;" style to table, th, and td elements; 2. Add "border-style:none;" style to table, th, and td elements; 3. Add "border:transparent;" style to table, th, and td elements.

How to remove table borders in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Here is an HTML document with a table

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
</table>

Copy after login

How to remove table borders in css

It can be seen that the table has a border, so what should I do if I want to remove the table border? Here are several methods.

Method 1: Add border: 0;Style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<style>
	table,th,td {
		border: 0;
	}
</style>
	</head>
	<body>
		<table border="1">
			<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 remove table borders in css

Method 2: Add border-style: none;style to table, th, td elements

<style>
	table,th,td {
		border-style: none;
	}
</style>

Copy after login

How to remove table borders in css

Method 3: Add border: transparent;style

<style>
	table,th,td {
		border: transparent;
	}
</style>

Copy after login

How to remove table borders in css

( Learning video sharing: css video tutorial)

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