更改 HTML 表格中整行的背景颜色

Question

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:

 .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; }

 <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

Answer 1

The table row is only as wide as the number of cells.

Add a final cell when you don't have a full row and use colspan as appropriate.

 .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(odd) { background-color: #bababa; } .table-striped tr:nth-child(even) { background-color: #e8e7e6; } 

 <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> <td colspan="5"></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> <td colspan="3"></td> </tr> </table> </div> 

Note from MDN that :

Any styles applied to the <tr> element will affect the cells within the row unless overridden by styles applied to those cells.

Pay particular attention to the fact it styles the cells, not the row itself

EDIT

We know from your question and comments that you are using javascript to generate the table. We can't infer much on how you are doing this, but if you are generating the table row by row you should be able to see if you have generated the amount of cell for that row equal to the amount of th cells. If not, add a cell with the difference as a colspan . If you can't do this you can do it after the table is created.

This is a rough way of doing it

 function addColspan(table) { //Assume number of th are our max cells per row var maxCells = table.querySelectorAll("th").length; //Get all rows but the first var rows = table.querySelectorAll("tr:nth-child(n+2)"); for(var i = 0; i < rows.length; i++){ //Get how many cells we have var cellCount = rows[i].querySelectorAll("td").length; //If we don't have enough cells if(cellCount < maxCells) { //Add one with the appropriate colspan rows[i].innerHTML += "<td colspan='" + (maxCells - cellCount) + "'></td>"; } } } //Run after table is generated addColspan(document.querySelector(".table-striped")); 

 .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(odd) { background-color: #bababa; } .table-striped tr:nth-child(even) { background-color: #e8e7e6; } 

 <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> 

Answer 2

You can use even and odd properties in css. Check this out

 .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(odd) td { background-color: #bababa; } .table-striped tr:nth-child(even) td { background-color: #e8e7e6; } 

 <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> 

---

Updated answer after the comment. You need to have alteast empty in order to highlight the complete rows.

 .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(odd) td { background-color: #bababa; } .table-striped tr:nth-child(even) td { background-color: #e8e7e6; } 

 <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> <td></td> <td></td> <td></td> <td></td> <td></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> <td></td> <td></td> <td></td> </tr> </table> </div> 

Answer 3

Try to give your row an id. Then you should be able to access the entire row in your css code.