title: Change background color of entire row in HTML table
body: <p>I have a dynamic table which data's are coming from an API. I'm generating the table and inserting rows using JavaScript. </p>
  
  <p>Everything is working properly but the problem is in styling. </p>
  
  <p>My table row colors are stripped (just like we use bootstrap table-striped class) and cells are not same in every row. </p>
  
  <p>Some has 3, some has 6, some 4 etc. Where cells are less they are showing some blank space. </p>
  
  <p>Is there any way i can color the entire row. Here is an example. Here is an example of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-striped th {
    height: 45px;
    background-color: #bfff00 !important;
    color: #191919;
  }
  
  .table-striped td {
    padding: 8px;
    border: 2px solid #F6F6F6;
    font-weight: bold;
  }
  
  .table-striped&gt;tr:nth-child(n+1)&gt;td {
    background-color: #bababa;
  }
  
  .table-striped&gt;tr:nth-child(n+2)&gt;td {
    background-color: #e8e7e6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;table class="table-striped"&gt;
      &lt;tr&gt;
        &lt;th&gt;Header 1&lt;/th&gt;
        &lt;th&gt;Header 2&lt;/th&gt;
        &lt;th&gt;Header 3&lt;/th&gt;
        &lt;th&gt;Header 4&lt;/th&gt;
        &lt;th&gt;Header 5&lt;/th&gt;
        &lt;th&gt;Header 6&lt;/th&gt;
        &lt;th&gt;Header 7&lt;/th&gt;
        &lt;th&gt;Header 8&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cell 1&lt;/td&gt;
        &lt;td&gt;Cell 2&lt;/td&gt;
        &lt;td&gt;Cell 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cell 1&lt;/td&gt;
        &lt;td&gt;Cell 2&lt;/td&gt;
        &lt;td&gt;Cell 3&lt;/td&gt;
        &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;td&gt;Cell 5&lt;/td&gt;
        &lt;td&gt;Cell 6&lt;/td&gt;
        &lt;td&gt;Cell 7&lt;/td&gt;
        &lt;td&gt;Cell 8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cell 1&lt;/td&gt;
        &lt;td&gt;Cell 2&lt;/td&gt;
        &lt;td&gt;Cell 3&lt;/td&gt;
        &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;td&gt;Cell 5&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is <a href="https://jsfiddle.net/rfg5hxz7/" rel="nofollow noreferrer">jsfiddle</a></p>