CSSで行要素を非表示にする方法-CSSチュートリアル-php.cn

CSSで行要素を非表示にする方法

WBOY

リリース： 2021-11-24 11:11:48

オリジナル

2857 人が閲覧しました

CSS で行要素を非表示にする方法: 1. display 属性を使用すると、「display:none」スタイルを row 要素に追加するだけです; 2. Visibility 属性を使用すると、次のことを追加するだけです。 row要素に「visibility:hidden」を設定します。「スタイルで十分です。

CSSで行要素を非表示にする方法

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

css で行要素を非表示にする方法

#1. CSS では、display 属性を none に設定して、次の効果を実現できます。要素を隠します。行要素を非表示にするには、行要素に「display:none」スタイルを追加するだけです。

行要素を非表示にする方法を例として見てみましょう。例は次のとおりです:

新しい HTML ファイルを作成し、test.html という名前を付けて、CSS が行要素を非表示にする方法を説明します。テーブル。 table タグを使用して、3 行 2 列のテーブルを作成します。 2行目のid属性をmytargetに設定し、以下はCSSで非表示にします。

css タグで、table を通じてテーブルの幅を 280px、高さを 180px に設定します。

CSSで行要素を非表示にする方法

#2. css タグで、id を使用してテーブルの 2 行目のスタイルを設定し、表示属性を none に設定して非表示にします。

CSSで行要素を非表示にする方法

ブラウザで test.html ファイルを開いて効果を確認します。

CSSで行要素を非表示にする方法

概要:

table タグを使用して、3 行 2 列のテーブルを作成します。
2行目のid属性をmytargetに設定し、以下にCSSを使用して非表示にします。
css タグで、table を通じてテーブルの幅を 280px、高さを 180px に設定します。
css タグで、id を使用してテーブルの 2 行目のスタイルを設定し、表示属性を none に設定して非表示にします。

2. CSS の Visibility 属性を使用して行要素を非表示にすることもできます。Visibility 属性は、要素が表示されるかどうかを指定します。

行要素に「visibility:hidden」スタイルを追加するだけです。例は次のとおりです:

<html>
<style type="text/css">
#hang{visibility:hidden}
</style>
<body>
<table border="1">
  <tr id="hang">
    <th>1111</th>
    <th>2222</th>
  </tr>
  <tr>
    <td>3333</td>
    <td>4444</td>
  </tr>
</table>
</body>
</html>

ログイン後にコピー

出力結果:

CSSで行要素を非表示にする方法