html hidden table-Front-end Q&A-php.cn

html hidden table

PHPz

Release： 2023-05-15 19:31:35

Original

1558 people have browsed it

HTML hidden table

In web design, tables are a common layout method. But in some cases, we may need to hide the table and only show it when needed. This article will introduce how to hide tables in HTML.

1. Hide tables through CSS

CSS is the standard language for controlling styles in web pages. We can use CSS to control the visibility of tables. The following is some CSS code to hide the table:

display: none;

This is the most commonly used way to hide elements in CSS, setting the "display" of the element Attribute "none" can completely hide the element. We can apply this style to the table element to hide the table.

For example:

<table style="display: none;">
  <tr>
    <td>隐藏表格</td>
  </tr>
</table>

Copy after login

visibility: hidden;

This method is similar to display: none;, the difference is that the element still occupies space, but Invisible. If you need to make the table redisplay under certain circumstances, you can set the visibility property to "visible".

For example:

<table style="visibility: hidden;">
  <tr>
    <td>隐藏表格</td>
  </tr>
</table>

Copy after login

2. Use JavaScript to dynamically hide the table

In addition to CSS, we can also use JavaScript to dynamically hide the table. This method allows us to more flexibly control the hiding and display of tables.

Using the style.display attribute

In JavaScript, you can use the style.display attribute of a DOM element to control the visibility of the element. If we want a table to be hidden when the page loads, we can add the following code in the