HTMLで表の枠線を非表示にする方法-htmlチュートリアル-php.cn

HTMLで表の枠線を非表示にする方法

青灯夜游

リリース： 2021-12-10 14:50:31

オリジナル

11826 人が閲覧しました

htmlテーブルの境界線を非表示にする方法: 1. style 属性を使用して、「border: none;」を table、th、および td 要素に追加します。2. style 属性を使用して「border-color:」を追加します。表要素に「透明」スタイルを追加します。

HTMLで表の枠線を非表示にする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

次のテーブルがあります:

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

ログイン後にコピー

HTMLで表の枠線を非表示にする方法

このテーブルの境界線を非表示にするにはどうすればよいですか?その方法は次のとおりです:

#1. border: none;style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body>
<table border="1" style="border: none;">
	<tr>
		<th  style="border: none;">姓名</th>
		<th  style="border: none;">年龄</th>
	</tr>
	<tr>
		<td style="border: none;">Peter</td>
		<td style="border: none;">20</td>
	</tr>
	<tr>
		<td style="border: none;">Lois</td>
		<td style="border: none;">20</td>
	</tr>
</table>
	</body>
</html>

ログイン後にコピー

## をテーブルに追加します。 HTMLで表の枠線を非表示にする方法

#2.

border-color:transparent;style

<table border="1"   style="max-width:90%">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
</table>

ログイン後にコピー

を table 要素に追加します。推奨チュートリアル:《