Home  >  Article  >  Web Front-end  >  How to hide row elements in css

How to hide row elements in css

WBOY
WBOYOriginal
2021-11-24 11:11:482635browse

How to hide row elements in css: 1. Using the display attribute, you only need to add the "display:none" style to the row element; 2. Using the visibility attribute, you only need to add "visibility:hidden" to the row element. "Style is enough.

How to hide row elements in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to hide row elements in css

#1. In css, we can set the display attribute to none to achieve the effect of hiding elements. To hide a row element, just add a "display:none" style to the row element.

Let’s take an example to see how to hide row elements. The example is as follows:

Create a new HTML file and name it test.html to explain how CSS hides a row in the table. Use the table tag to create a table with three rows and two columns. Set the id attribute of the second line to mytarget, and use css to hide it below.

In the css tag, set the width of the table to 280px and the height to 180px through table.

How to hide row elements in css

#2. In the css tag, set the style of the second row of the table through the id, and set the display attribute to none to hide it.

How to hide row elements in css

Open the test.html file in the browser to check the effect.

How to hide row elements in css

Summary:

  • Use the table tag to create a table with three rows and two columns.

  • Set the id attribute of the second line to mytarget, and use css to hide it below.

  • In the css tag, set the width of the table to 280px and the height to 180px through table.

  • In the css tag, set the style of the second row of the table through the id, and set the display attribute to none to hide it.

2. You can also use the visibility attribute in CSS to hide row elements. The visibility attribute specifies whether the element is visible.

You only need to add the "visibility:hidden" style to the row element. The example is as follows:




1111 2222
3333 4444

Output result:

How to hide row elements in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to hide row elements in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn