Скрыть все строки и показать выделенное

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Мне нужно скрыть все строки, а затем показать выбранные. Мои коды такие, как показано ниже. Это отлично работает во всех браузерах, кроме Internet Explorer. В IE все строки становятся скрытыми и ничего не отображаются.

Любая помощь была бы высоко оценена.

Вот код определения таблицы

 <table id="tableID">
<thead>
<tr>
    <th>Product</th>
    <th>Price</th>
    <th>Destination</th>
    <th>Updated on</th>
</tr>
</thead>
<tbody>
<tr class="parent">
    <td>Oranges</td>
    <td>100</td>
    <td>22/10</td>
</tr>
<tr>
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
</tbody>
  

Вот CSS

     #tableID tbody tr {
    display : none;
     }


   #tableID tr.parent {
    display : table-row;
    color: blue;
     }
  

Ответ №1:

Возможно, ваша версия IE не поддерживает display: table-row свойство. Итак, вместо этого попробуйте с display:block

 #tableID tr.parent {
    display : block;
    color: blue;
 }