検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで表の枠線を削除する方法

CSSで表の枠線を削除する方法

青灯夜游
青灯夜游オリジナル
2021-10-12 15:55:329972ブラウズ

削除方法: 1. table、th、td要素に「border:0;」スタイルを追加; 2. table、th、td要素に「border-style:none;」スタイルを追加; 3 . table要素、th要素、td要素に「border:transparent;」スタイルを追加します。

CSSで表の枠線を削除する方法

このチュートリアルの動作環境: Windows 7 システム、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: 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:

CSSで表の枠線を削除する方法## を追加します。

#方法 2:

border-style: none;style を table、th、td 要素に追加します

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

CSSで表の枠線を削除する方法#方法 3:

border:transparent;

style<pre class="brush:html;toolbar:false">&lt;style&gt; table,th,td { border: transparent; } &lt;/style&gt;</pre>

(学習ビデオ共有: CSSで表の枠線を削除する方法css ビデオ チュートリアル

)# を追加します。 ##

以上がCSSで表の枠線を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html border table td th
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WebCSSの読み方次の記事：WebCSSの読み方

関連記事

続きを見る