Javascript 使用js添加项目后，HTML表大小不正确

我使用以下HTML代码创建了一个表：

<div class="noten_tabelle">
            <table id="grades_table" style="width:100%">
              <tr>
                <th>Fach</th>
                <th>mündlich</th>
                <th>Klausur</th>
              </tr>
              <!-- Make content with js code -->
            </table>
          </div>  

为了理解。主题值是一个数字，因此我将其转换为字符串。结果是主题名称。他有点像：“Mathematik”或“Deutsch”。
我明白了：

但这是不对的。受试者名称“Latein”在“Fach”下是正确的，但“5,8”应在“mündlich”下。“11,4”应该在“klausur”下。
因为“Vokalensemle”应该在“Fach”下的下一行，在“mündlich”下的“4,7”和在“Klausur”下的空白区域，这有什么错

哦，是的。这是我的CSS：

table {
    font-family: Montserrat-Medium;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

---

我希望您能找到我的问题的解决方案。如果您需要了解什么，请告诉我。

我在您的代码中看不到您正在为新表单元格添加新的父表行

如果单元格位于新行内，且表格单元格数量相同，则这些单元格将对齐

附加一个新的

tr

并将新的

td

单元格添加到该单元格中

如果需要每行的单元格数量不均匀，则需要使用

colspan={number of columns cell will span over}

您想要一个代码示例吗？

您只输入

。您不介意

。

      var y = document.createElement("TR");
      y.setAttribute("id", [subject_name]);

      //Spalten in einer Zeile

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById("grades_table").appendChild(y);

      var y = document.createElement("TR");
      y.setAttribute("id", [subject_name]);

      //Spalten in einer Zeile

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById("grades_table").appendChild(y);