Colspan from table doesn't work correctly - php

Question

I have an HTML table, where if you click on the “<?php echo $row["title"]; ?>“, for each row, it will display the exercise text corresponding to that title.
This is working fine, it toggles correctly but I don’t know why the doesn’t work. The title only displays in one of the columns, but I would like to display on the 3 of them. Below I post a picture with what I get.
Can you help me solve this?
This is my code:
<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 --->
This is my script:
<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

Since you are changing the display of a <tr> you need to set it properly when you need to show it or else it does not obey table structure rules.
The issue is:
x.style.display = "block";
It should be:
x.style.display = "table-row";
Or, better yet just unset it if you don't want to keep track of the "correct" value:
x.style.display = "";
disclaimer: I do not know if all browsers will properly support this third option.
See https://stackoverflow.com/a/7971565/2191572 for other options.
You can also use:
x.style.display = "initial";
but it may not work in all browsers such as IE 11 and earlier per https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility