title: Unwanted extra row in my html table
body: <p>I have this below code:</p>
  
  <pre><code>{
  
      str = str + "&lt;thead&gt;&lt;tr&gt;&lt;th class=tableGridFontHeader&gt;Condition&lt;/th&gt;";
      str = str + "&lt;th class=tableGridFontHeader&gt;UnAdjusted Value&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;";
  
      str = str + "&lt;tbody&gt;&lt;/tbody&gt;&lt;tr&gt;&lt;td class=tableGridFont align=center&gt;B-Average&lt;/td&gt;";
      str = str + "&lt;td&gt;" + avgUnAdjTxt + "&lt;/td&gt;&lt;/tr&gt;";
  
      str = str + "&lt;tr&gt;&lt;td class=tableGridFont align=center&gt;C-Rough&lt;/td&gt;";
      str = str + "&lt;td&gt;" + accounting.formatMoney(roughUnAdjTxt, "$", 0) + "&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;";
  
  $("#blackBookWholeSaleTable").html(str);
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>.tableGridFontHeader
  {
  font-size:16px;
  color:#09364b;
  background-color:#bdd2dc;
  padding-left: 15px;
  }
  
  .tableGridFont
  {   
  font-size:14px;
  color:#555f60;
  padding-left: 15px;
  }
  }
  </code></pre>
  
  <p>I am seeing an extra row when I reload this table: </p>
  
  <p><img src="https://i.stack.imgur.com/IFwaf.png" alt="enter image description here"></p>
  
  <p>I can't remove it no matter what I do. When I look at the source I see an extra tbody. </p>