我的桌子不会进入下一排？

Question

我正在编写一个包含10个问题的示例数学工作表。有一个模板，我已经转换成一个字符串，一旦用户按下“生成问题”按钮，将在我的页面中输出10次（每个问题一个）。模板由表组成 - 一行代表问题，另一行代表答案。它的意思是这样的：
（请注意，这是在我将表格转换为JavaScript字符串之前。事先是纯HTML。）

然而，在制作模板之后，即使我认为我已正确插入<br>，我也会得到这样的结果：

我在这里遇到了一堵砖墙 - 我似乎无法找到解决方案。

这是我的JS模板代码。字符串很长，所以关键字搜索“这里是休息”跳转到我想要休息的地方：

 // ---------- print template ----------
        var idQuestion =  "question" + i;
        var szQuestionHTML = '<td style="background-color: #66ff99;">' + i + '.' + '</td> <td style="background-color: #66ff99;" colspan="2" align="center"> <table> <tbody> <tr> <td id="qnom">' + qnom + '</td> </tr> <tr> <td id="qdenom" style="border-top: 2px solid rgb(0, 0, 0);">' + qdenom + '</td> </tr> </tbody> </table> </td> <td style="background-color: #66ff99;"> </td> </tr><br><!--here is the break that doesnt work--> <tr> <!--q1 options--> <td style="background-color: #cccccc;">a. <table> <tbody> <tr> <td id="a1">' + a1/*a1*/ + '</td> </tr> <tr> <td id="a2" style="border-top: 2px solid rgb(0, 0, 0);">' + a2 + '</td> </tr> </tbody> </table> </td> <td style="background-color: #cccccc;">b. <table> <tbody> <tr> <td id="b1">' + b1 + '</td> </tr> <tr> <td id="b2" style="border-top: 2px solid rgb(0, 0, 0);">' + b2/*b2*/ + '</td> </tr> </tbody> </table> </td> <td style="background-color: #cccccc;">c. <table> <tbody> <tr> <td id="c1">' + c1+ '</td> </tr> <tr> <td id="c2" style="border-top: 2px solid rgb(0, 0, 0);">' + c2 + '</td> </tr> </tbody> </table> </td> <td style="background-color: #cccccc;">d. <table> <tbody> <tr> <td id="d1">' + d1 + '</td> </tr> <tr> <td id="d2" style="border-top: 2px solid rgb(0, 0, 0);">' + d2 + '</td> </tr> </tbody> </table> </td>';


        document.getElementById(idQuestion).innerHTML = szQuestionHTML;
// ---------- end print template ----------

这里是模板的打印位置（假设每个问题中有10个，分别命名为question2，question3等）：
<tr id="question1"><td></td></tr>

我不打算通过jQuery或任何其他扩展/库来解决这个问题，因为我想知道这个问题的根源。当然，除非我无法解决这个问题。提前谢谢！

编辑：我通过分隔问题字符串和答案字符串来解决问题。