title: Why Chrome adds tbody tag to each table row?
body: <p>I have two tables that fill up throw an event.</p>
  
  <p>The stylesheet is made for that the even rows get painted white.</p>
  
  <pre><code>table {
  
  border-collapse: collapse;
  width: 100%;
  
  }
  
  td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  }
  
  tr:nth-child(even) {
  background-color: #dddddd;
  }
  </code></pre>
  
  <p>But due Chrome adds <code>tbody</code> tag to each <code>tr</code> tag it's doesn't work.</p>
  
  <p>The first table fill up throw back-end:</p>
  
  <pre><code>var prueba = {};
      prueba = nuevaCadena[nuevaCadena.length - 1].replace(/&lt;br&gt;/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 += "&lt;th&gt;Heladeria&lt;/th&gt;";
          tr2.innerHTML += "&lt;th&gt;Fecha&lt;/th&gt;";
          tr2.innerHTML += "&lt;th&gt;ID&lt;/th&gt;";
  
      } else {
         var template = "&lt;tr&gt;&lt;td&gt;{{heladeria}}&lt;/td&gt;&lt;td&gt;{{fecha}}&lt;/td&gt;&lt;td&gt;{{venta}}&lt;/td&gt;&lt;/tr&gt;";
  
          document.querySelector('#contenido').innerHTML +=       Mustache.render(template, prueba);
  
     }
  </code></pre>
  
  <p>And the second works perfectly. It's fill up throw the <code>select</code> tag  values.</p>
  
  <pre><code>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 += "&lt;th&gt;Heladeria&lt;/th&gt;";
  tr2.innerHTML += "&lt;th&gt;Fecha&lt;/th&gt;";
  tr2.innerHTML += "&lt;th&gt;Sabor&lt;/th&gt;";
  tr2.innerHTML += "&lt;th&gt;Cantidad&lt;/th&gt;";
  
  }
  
  
  
  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 &lt;= 0; i++) {
  
  var input = document.getElementById(option[i]).selectedIndex;
  var input2 = document.getElementById(option[i]).options;
  
  tr.innerHTML += "&lt;td&gt;" + input2[input].text + "&lt;/td&gt;";
  tr.innerHTML += "&lt;td&gt;" + fecha.value + "&lt;/td&gt;";
  
  for (var j = 1; j &lt;= 1; j++) {
  
      input = document.getElementById(option[j]).selectedIndex;
      input2 = document.getElementById(option[j]).options;
      tr.innerHTML += "&lt;td&gt;" + input2[input].text + "&lt;/td&gt;";
      tr.innerHTML += "&lt;td&gt;" + valor.value + "&lt;/td&gt;";
      tr.innerHTML += "&lt;input type='button' class='borrar' value='x'         onclick='deleted(this)'/&gt;";
  
  }
  
  
  }
  </code></pre>
  
  <p>The results  are this:</p>
  
  <p>This question didn't work for me <a href="https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements">Why do browsers insert tbody element into table elements?</a>  i use Mustache.</p>
  
  <p><img src="https://i.stack.imgur.com/lrLDD.png" alt="Screenshot of Table"></p>
  
  <p><img src="https://i.stack.imgur.com/dWfWd.png" alt="Screenshot of Chrome adding tbody"></p>