Home  >  Article  >  Web Front-end  >  How to remove table borders in css

How to remove table borders in css

青灯夜游
青灯夜游Original
2021-10-12 15:55:329885browse

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>

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>

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>

How to remove table borders in css

Method 3: Add border: transparent;style

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

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!

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:How to read web cssNext article:How to read web css