Colspan из таблицы не работает правильно

Question

У меня есть таблица HTML, где, если вы нажмете «<?php echo $row["title"]; ?>», для каждой строки будет отображен текст упражнения, соответствующий этому заголовку.

Это работает нормально, оно переключается правильноно я не знаю, почему не работает.Заголовок отображается только в одном из столбцов, но я хотел бы отобразить 3 из них.Ниже я размещаю фотографию с тем, что я получаю.

Можете ли вы помочь мне решить эту проблему?

Это мой код:

<tr>
            <td><?php echo $num_ex; ?></td> 

            <!---Click Toggle Exercise-->
            <td><a  onclick="myFunction(<?php echo $row["exercise_id"] ?>)" role="button" class="btn" target="_blank" ><?php echo $row["title"]; ?></a>
                </td>

            <td><?php echo $row["difficulty"]; ?></td>

</tr>

<!--- Toggle --->
<tr id="toggle<?php echo $row["exercise_id"] ?>"  style="display:none">

    <td colspan="3"> <!---THIS COLSPAN IS NOT WORKING-->

            <?php
            $sql = "SELECT * FROM exercises WHERE exercise_id='".$row["exercise_id"]."'";
            $result_ej = $conn->query($sql); /*Check connection*/
            $row_ej = $result_ej->fetch_assoc();
            ?>

            <p><?php echo $row["exercise_id"] . ". " . $row["text"]?></p>

 </td>
 </tr><!---Finish Toggle --->

Это мой сценарий:

  <script>
        function myFunction(ejer_id) {
            var x = document.getElementById("toggle" + ejer_id);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

Answer 1

Поскольку вы изменяете отображение <tr>, вам необходимо правильно установить его, когда вам нужно показать его, иначе он не подчиняется правилам структуры таблицы.

Вопрос:

x.style.display = "block";

Должно быть:

x.style.display = "table-row";

Или, что еще лучше, просто отмените его, если вы не хотите отслеживать «правильное» значение:

x.style.display = "";

отказ от ответственности: я не знаю, будут ли все браузеры правильно поддерживать эту третью опцию.

См. https://stackoverflow.com/a/7971565/2191572 для других опций.

---

Вы также можете использовать:

x.style.display = "initial";

, но он может работать не во всех браузерах, таких как IE 11 и более ранних версий, для https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility