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

Question

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

Попробовал добавить 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>

Answer 1

Неизвестно в каком браузере проявляется сей дефект, но в 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>

Answer 2

Все очень просто. При border-style: collapse даже скрытые строки/ячейки имеют свой бордюр. Так что, скрывать их надо display: none или использовать выборочный бордюр border-style: separate; со свойствами cellpadding="0" cellspacing="0".

<!DOCTYPE html>
<html>

<head>
  <title>Page</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    
    #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;
    }
    
    #tchests tr.invisible td {
      display: none;
    }
  </style>
  <script type="text/javascript">
    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('invisible');
            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');
          }
          setTimeout(() => {
            [...document.querySelectorAll('#tchests tr.hidden')].
            map(tr => tr.classList.add('invisible'));
          }, 500);
        }
      };
    };
  </script>
</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>

БЛОГ НА HUSL

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

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