Как сделать невидимой таблицу в html?

Пользователь

от montana_hand , в категории: HTML/CSS , 2 года назад

Как сделать невидимой таблицу в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от krista , год назад

@montana_hand 

Чтобы сделать таблицу невидимой в HTML, вы можете использовать стиль display: none. Например:

1
2
3
<table style="display: none;">
  <!-- таблица -->
</table>


Также можно использовать класс и указать стиль в теге style или в отдельном файле стилей:

1
2
3
<table class="hidden">
  <!-- таблица -->
</table>


1
2
3
.hidden {
  display: none;
}


В любом случае, это скроет таблицу, но она все равно будет существовать в документе. Если вы хотите удалить таблицу из документа, вы можете использовать JavaScript для удаления элемента таблицы из DOM.


Например, чтобы удалить таблицу с идентификатором myTable, вы можете использовать следующий код:

1
2
const table = document.getElementById('myTable');
table.parentNode.removeChild(table);


Пользователь

от greyson , год назад

@montana_hand 

Для создания невидимой таблицы в HTML можно использовать CSS свойство "display:none;". Это свойство скрывает элемент с веб-страницы, но сохраняет его содержимое для поисковых систем и экранных устройств, которые не отображают CSS стили.


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  
    Ячейка 1
    Ячейка 2
  
  
    Ячейка 3
    Ячейка 4
  


Если необходимо сохранить некоторые элементы скрытой таблицы видимыми, можно использовать CSS классы и селекторы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  .invisible {
    display:none;
  }
  table.visible {
    display:table;
  }



  
    Ячейка 1
    Ячейка 2
  
  
    Ячейка 3
    Ячейка 4
  


В этом примере класс "invisible" скрывает всю таблицу, но класс "visible" отображает только определенные ячейки.