Не до конца скрываются строки таблицы

Решил сделать таблицу, у которой при нажатии кнопки показываются/скрываются строки. Всё работает хорошо, но есть одна маленькая неприятная проблема - когда строки скрываются, то там остаётся расстояние в несколько пикселей.

Таблица

Попробовал добавить display: none; к #tchests tr.hidden td , но тогда не будет работать transition. Итоговый код гораздо больше, и всё завязано на тег table, поэтому предложение переверстать всё на div-ах мне не подходит.


        window.onload = function() {
            document.querySelector('#tchests tr.show-more').onclick = function() {
                let els = document.querySelectorAll('#tchests tr.hidden');
                if (els.length > 0) {
                    for (let i = 0; i < els.length; i++) {
                        els[i].classList.remove('hidden');
                        els[i].classList.add('visible');
                    }
                } else {
                    let els = document.querySelectorAll('#tchests tr.visible');
                    for (let i = els.length - 1; i >= 0; i--) {
                        els[i].classList.remove('visible');
                        els[i].classList.add('hidden'); 
                    }
                }
            };
        };
#tchests { width: 25%; border-collapse: collapse; }

        #tchests th, #tchests td { text-align: center; border-style: solid; border-color: #dcdcdc; }
        #tchests tr.show-more td { cursor: pointer; border-top-width: 0; }

        #tchests tr.hidden td { padding: 0; border-width: 0; overflow: hidden; transition: border-width 0s .50s linear, padding 0s .50s linear; }
        #tchests tr.visible td { padding: 7px 8px; border-width: 3px; transition: padding .25s linear; }

        #tchests tr.hidden td div { max-height: 0; transition: max-height .50s linear; }
        #tchests tr.visible td div { max-height: 100px; transition: max-height .75s linear; }
<!DOCTYPE html>
<html>
  <head>
    <title>Page</title>
  </head>
<body>
    <table id="tchests">
        <tbody>
            <tr class="top">
                <th>A</th>
            </tr>
            <tr>
                <td><div>1</div></td>
            </tr>
            <tr class="hidden">
                <td><div>2</div></td>
            </tr>
            <tr class="hidden">
                <td><div>3</div></td>
            </tr>
            <tr class="show-more">
            <td colspan="3"><span>Show/Hide</span></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Ответы (1 шт):

Автор решения: UModeL

Неизвестно в каком браузере проявляется сей дефект, но в Chrome87, Firefox84 и Edge88 указанных отступов не наблюдается.

А вот по поводу:

Итоговый код гораздо больше...

кажется понятно почему ;-) Я бы реализовал немного по-другому:

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <style>
    #tchests { width: 25%; border-collapse: separate; border-spacing: 0px; }    
    #tchests th, #tchests td { text-align: center; border-style: solid; border-color: #dcdcdc; }
    #tchests tbody tr td { padding: 0; border-width: 0; overflow: hidden; transition: border-width 0s .50s linear, padding 0s .5s linear;}
    #tchests tbody.visible tr td { padding: 7px 8px; border-width: 3px; border-top-width: 0; transition: padding .25s linear; }
    #tchests tbody tr td div { max-height: 0; transition: max-height .5s linear; }    
    #tchests tbody.visible tr td div { max-height: 100px; transition: max-height .75s linear; }
    #tchests tfoot tr td { cursor: pointer; border-width: 3px; border-top-width: 0; }
  </style>
  <script>
    window.onload = function() {
      document.querySelector('#tchests tfoot tr').onclick = () => {
        document.querySelector('#tchests tbody').classList.toggle('visible');
      };
    };
  </script>
</head>
<body>
  <table id="tchests">
    <thead><tr><th>A</th></tr></thead>
    <tbody>
      <tr><td><div>1</div></td></tr>
      <tr><td><div>2</div></td></tr>
      <tr><td><div>3</div></td></tr>
    </tbody>
    <tfoot><tr><td><span>Show/Hide</span></td></tr></tfoot>
  </table>
</body>
</html>

→ Ссылка