I have a dynamic table which data's are coming from an API. I'm generating the table and inserting rows using JavaScript. 

Everything is working properly but the problem is in styling. 

My table row colors are stripped (just like we use bootstrap table-striped class) and cells are not same in every row. 

Some has 3, some has 6, some 4 etc. Where cells are less they are showing some blank space. 

Is there any way i can color the entire row. Here is an example. Here is an example of my code:

```css
.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>tr:nth-child(n+1)>td {
  background-color: #bababa;
}

.table-striped>tr:nth-child(n+2)>td {
  background-color: #e8e7e6;
}
```

```html
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>
```

Here is [jsfiddle](https://jsfiddle.net/rfg5hxz7/)