Почему Chrome добавляет тег tbody в каждую строку таблицы?

У меня есть две таблицы, которые заполняют события.

Таблица стилей создана для того, чтобы четные строки окрашивались в белый цвет.

table {

border-collapse: collapse;
width: 100%;

}

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

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

Но из-за того, что Chrome добавляет тег tbody к каждому тегу tr, он не работает.

Первая таблица заполняется бэкендом:

var prueba = {};
    prueba = nuevaCadena[nuevaCadena.length - 1].replace(/<br>/g, "").split(",");
    prueba.venta = prueba[0];
    prueba.fecha = prueba[1];
    prueba.heladeria = prueba[2];

    //prueba.base.split(",");

    //if (myElem === null) {
    var contenido = document.getElementById("contenido");
    var tr2 = document.createElement("TR");


    if (contenido.getElementsByTagName("TH").length === 0)
    {
        contenido.appendChild(tr2);
        tr2.innerHTML += "<th>Heladeria</th>";
        tr2.innerHTML += "<th>Fecha</th>";
        tr2.innerHTML += "<th>ID</th>";

    } else {
       var template = "<tr><td>{{heladeria}}</td><td>{{fecha}}</td><td>{{venta}}</td></tr>";

        document.querySelector('#contenido').innerHTML +=       Mustache.render(template, prueba);

   }

А второй работает отлично. Он заполняется значениями тега select.

var contenido = document.getElementById("contenido2");
var tr2 = document.createElement("TR");

var tr = document.createElement("TR");
if (contenido.getElementsByTagName("TH").length === 0)
{
contenido.appendChild(tr2);
tr2.innerHTML += "<th>Heladeria</th>";
tr2.innerHTML += "<th>Fecha</th>";
tr2.innerHTML += "<th>Sabor</th>";
tr2.innerHTML += "<th>Cantidad</th>";

}



contenido.appendChild(tr);

//var th = document.createElement("TD");
var option = ["heladerias", "sabores"];
var valor = document.getElementById("sabor_calorias");
var fecha = document.getElementById("fecha");


for (var i = 0; i <= 0; i++) {

var input = document.getElementById(option[i]).selectedIndex;
var input2 = document.getElementById(option[i]).options;

tr.innerHTML += "<td>" + input2[input].text + "</td>";
tr.innerHTML += "<td>" + fecha.value + "</td>";

for (var j = 1; j <= 1; j++) {

    input = document.getElementById(option[j]).selectedIndex;
    input2 = document.getElementById(option[j]).options;
    tr.innerHTML += "<td>" + input2[input].text + "</td>";
    tr.innerHTML += "<td>" + valor.value + "</td>";
    tr.innerHTML += "<input type='button' class='borrar' value='x'         onclick='deleted(this)'/>";

}


}

Результаты таковы:

Этот вопрос мне не помог Почему браузеры вставляют элемент tbody в элементы таблицы? я использую Mustache.