HTML таблица не имеет правильного размера после добавления элементов с помощью js

Question

Я создаю таблицу с этим кодом 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>  

И в Javascript я добавляю эти вещи в таблицу.Функция запускается каждый раз, когда сервер возвращает новые загруженные значения.Вот функция Javascript:

function addToTable(subject, mdl, klu) {

  var subject_name = getSubjectByNumber(subject);

      //Zeile erstellen

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

      //Spalten in einer Zeile

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

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

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

Для понимания.Значением темы является число, поэтому я превращаю его в строку.Результатом является имя субъекта.Он что-то вроде: "Mathematik" или "Deutsch".
Я получаю это:

Но это не правильно.Предметное имя "Latein" является правильным под "Fach", но "5,8" должно быть под "mündlich".И "11,4" должно быть под "klausur".
Что не так, потому что "Vokalensemle должен быть снова в следующей строке под" Fach "," 4,7 "под" mündlich "и пустое поле под"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;
}

Я надеюсь, что вы найдете решение моей проблемы. Если вам нужно что-то знать, дайте мне знать.

Answer 1

      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);

Answer 2

Я не вижу в вашем коде, где вы добавляете новую строку родительской таблицы для новых ячеек таблицы.

Ячейки будут выровнены, если они находятся в новой строке с тем же номером таблицыЯчейки.

Добавьте новую tr и добавьте к ней новые td ячейки.

Если вам нужно иметь разное количество ячеек в строке, вам нужно будет использовать colspan={number of columns cell will span over}.

Хотите пример кода?