집 > 기사 > 웹 프론트엔드 > CSS에서 표 테두리를 제거하는 방법

CSS에서 표 테두리를 제거하는 방법

青灯夜游원래의: 2021-10-12 15:55:329899검색

제거 방법: 1. 테이블, th 및 td 요소에 "border-style:none;" 스타일을 추가합니다. . "border-style:none;" 스타일을 table, th 및 td 요소에 추가하십시오.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

여기에 표가 있는 HTML 문서가 있습니다

<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>

CSS에서 표 테두리를 제거하는 방법

표에 테두리가 있는 것을 볼 수 있는데, 표 테두리를 제거하려면 어떻게 해야 할까요? 다음은 몇 가지 방법입니다.

방법 1: 테이블, th, td 요소에 border: 0; 스타일 추가border: 0;样式

<!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>

效果图：

CSS에서 표 테두리를 제거하는 방법

方法2：给table、th、td元素添加border-style: none;样式

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

CSS에서 표 테두리를 제거하는 방법

方法3：给table、th、td元素添加border: transparent;

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

Rendering:

CSS에서 표 테두리를 제거하는 방법

방법 2: 테이블, th, td 요소에 테두리 스타일 추가: 없음;스타일

rrreee🎜

🎜🎜🎜방법 3: 테이블에 border: transparent; 스타일 추가, th, td elements🎜🎜rrreee🎜🎜🎜🎜 (동영상 공유 학습: 🎜css 동영상 튜토리얼🎜 ) 🎜

위 내용은 CSS에서 표 테두리를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 html border table td th

성명：

이전 기사：웹 CSS를 읽는 방법다음 기사：웹 CSS를 읽는 방법