Почему Colspan не работает после использования jquery?

Question

Я пытался создать сворачиваемую таблицу, в которой есть несколько строк, которые видны все время, и несколько строк, которые расширяются при нажатии. Предполагается, что расширяемые строки будут иметь один столбец colspan 4, но это не ' t, а единственный столбец в строке ограничивается colspan 1. Вот код, который я использовал:

var coll = document.getElementsByClassName("breakrow");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

<table>
  <tr class="breakrow">
    <td>one</td>
    <td>4324</td>
    <td>&nbsp;&nbsp;<img src="green.png" style="width: 30.5%;height: 2.5%;"></td>
    <td><img class="down" src="down.png" style="width: 5vh;height: 1.5%;"></td>
  </tr> 
  <tr class="datarow" style="display: none;">
    <td  colspan="4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
  </tr>
</table>

Вы можете посмотреть на проблему: https://drive.google.com/drive/folders/1rd77LXNPc_Gd_cHfyL74oyga9H7y-qGO?usp=sharing Какие-нибудь исправления моей проблемы?

Answer 1

colspan работает только в элементах, которые действуют как строки таблицы.

Вы установили для свойства display значение block вместо table-row.