CSS を使用して表の境界線設定を作成する方法を段階的に説明します (コード付き)

前回の記事「css3を使って動的効果を加えるボタンを作る方法を教えます(コード共有)」では、css3を使って動的効果を加えるボタンを作る方法を紹介しました。 CSSを使って表の枠線を設定する方法を次の記事で紹介していますので、一緒に見ていきましょう。

Web ページにはこのようなテーブル レイアウトの境界線がよくあります。レンダリングを共有しましょう。効果を確認した後、それを実現する方法を検討しましょう。みなさんへ HTML CSS テーブルレイアウトの基本的な流れを説明します。

1. まず、新しい HTML ファイルを作成し、3 つの tr タグを定義します。

<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>热线</th>
		</tr>

		<tr>
			<td>1</td>
			<td>JAK</td>
			<td>1545122</td>
		</tr>

		<tr>
			<td>2</td>
			<td>ROSE </td>
			<td>30420</td>
		</tr>

コードの効果

##2.

を使用して「テーブル レイアウト」を実現します。これは、セルが同じ行にあるためです。テーブル グリッドと行の高さは常に同じであるため、「テーブル レイアウト」では、「フローティング レイアウト」で発生する「下揃え」の状況を回避できます。

<tr> <th>编号</th> <th>姓名</th> <th>热线</th> </tr> <tr> <td>1</td> <td>JAK</td> <td>1545122</td> </tr> <tr> <td>2</td> <td>ROSE </td> <td>30420</td> </tr>

ログイン後にコピー

コード効果

3. CSSセレクター

tabを使用してテーブルを変更し、スタイルを初期化し、境界線を追加します。属性を設定して、線を幅 1px の実線にし、色設定を赤に追加します。

4.

tab セレクターにスタイルを追加し、width を使用してサイズを設定します。幅は 300px です。# を使用してテーブルを追加します。 ##table -layout テーブルのレイアウト アルゴリズムを設定または取得します。値は次のとおりです: auto、構文は "table-layout: auto"、レイアウト アルゴリズムになりますが固定の場合、値は: fixed、構文は「table-layout:fixed」になります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.tab { border: 1px solid red; width: 300px; table-layout: auto; /* 固定布局算法 */ table-layout: fixed; }</pre><div class="contentsignin">ログイン後にコピー</div></div>5.

tab

セレクターを 2 つの定義「th と td」に追加して、境界線 border## を追加します。 # 属性 線幅を 1px の実線に設定し、色を黒に設定して追加します。

.tab th, .tab td {
			border: 1px solid black;
		}

コード効果

OK、コードの編集が完了しました。

完全なコード

	
	
	


	
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>热线</th>
		</tr>

		<tr>
			<td>1</td>
			<td>JAK</td>
			<td>1545122</td>
		</tr>

		<tr>
			<td>2</td>
			<td>ROSE </td>
			<td>30420</td>
		</tr>
	

推奨学習:

CSSビデオチュートリアル

以上がCSS を使用して表の境界線設定を作成する方法を段階的に説明します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。