Chrome Visibility: Collapse

Question

У меня есть страница с несколькими таблицами на ней. Чтобы улучшить читаемость, тело каждой таблицы свернуто, поэтому пользователь просто видит заголовок и нижний колонтитул. Существует кнопка для переключения на расширение.

В IE и Firefox он отлично работает. Но в Chrome и Safari на месте свернутого ряда есть пробел. Есть ли обходной путь для этих двух браузеров, которые удаляют пустое пространство?

Вот пример кода:

.collapse { 
 
    visibility: collapse; 
 
}

<table> 
 
    <caption>This is a Table</caption> 
 
    <thead> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class='collapse'> 
 
    <tr> 
 
     <td>Row 1, Cell 1</td> 
 
     <td>Row 1, Cell 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row 2, Cell 1</td> 
 
     <td>Row 2, Cell 2</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td>TOTAL 1</td> 
 
     <td>TOTAL 2</td> 
 
    </tr> 
 
    </tfoot> 
 
</table>

Answer 1

Chrome и Safari лечения visibility: collapse в visibility: hidden.

Это будет работать только в Firefox/IE.

Вы можете изменить его на display: none, чтобы убедиться, что он работает одинаково во всех браузерах, однако таким образом вы пропустите общую идею значения collapse, где вычисляется вся ширина/высота элементов таблицы и принимается во внимание счета в то время как влияет на другие элементы в таблице:

.collapse { 
 
    display: none; 
 
}

<table> 
 
    <caption>This is a Table</caption> 
 
    <thead> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class='collapse'> 
 
    <tr> 
 
     <td>Row 1, Cell 1</td> 
 
     <td>Row 1, Cell 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row 2, Cell 1</td> 
 
     <td>Row 2, Cell 2</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td>TOTAL 1</td> 
 
     <td>TOTAL 2</td> 
 
    </tr> 
 
    </tfoot> 
 
</table>