如何制作桌子 <td> 和 <tr> 全屏宽度？

Question

I can't make its width 100% and text middle . As I mentioned in the table, The problem is here this place isn't 100% width, and text isn't in center. how can I make it?

  .hoverTable{ width:100%; border-collapse:collapse; } .hoverTable td{ padding:7px; border:#4e95f4 1px solid; } /* Define the default color for all the table rows */ .hoverTable tr{ background: #b8d1f3; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #ffff99; } .hoverTable th{ background: #b8d1f3; } 

 <table class="hoverTable"> <tr> <th>The problem is here</th> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 1A</td> <td>Item 1B</td> <td>Item 1C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 2A</td> <td>Item 2B</td> <td>Item 2C</td> </tr> <th class="width: 100%;">The problem is here</th> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 3A</td> <td>Item 3B</td> <td>Item 3C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 4A</td> <td>Item 4B</td> <td>Item 4C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 5A</td> <td>Item 5B</td> <td>Item 5C</td> </tr> </table> 

Thank you

Answer 1

can use the goodOld colspan attr:

  .hoverTable{ width:100%; border-collapse:collapse; } .hoverTable td{ padding:7px; border:#4e95f4 1px solid; } /* Define the default color for all the table rows */ .hoverTable tr{ background: #b8d1f3; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #ffff99; } .hoverTable th{ background: #b8d1f3; } 

 <table class="hoverTable"> <tr> <th colspan="3">The problem is here</th> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td> </tr> <th colspan="3" class="width: 100%;">The problem is here</th> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td> </tr> </table> 

you might also consider taking the line out of table structure (avoiding nesting is probably better than using colspan because you don't need to know the column number)

Answer 2

Since there are 3 cols in each row, to make the td in the single cell row we need to use the colspan attribute , then the text-align rule can be used to center align the text

 .hoverTable { width: 100 %; border - collapse: collapse; } .hoverTable td { padding: 7px; border: #4e95f4 1px solid; } .hoverTable th { text-align: center; } /* Define the default color for all the table rows */ .hoverTable tr { background: # b8d1f3; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #ffff99; } .hoverTable th { background: #b8d1f3; } 

 <table class="hoverTable"> <tr> <th colspan="3">The problem is here</th> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 1A</td> <td>Item 1B</td> <td>Item 1C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 2A</td> <td>Item 2B</td> <td>Item 2C</td> </tr> <tr> <th colspan="3">The problem is here</th> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 3A</td> <td>Item 3B</td> <td>Item 3C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 4A</td> <td>Item 4B</td> <td>Item 4C</td> </tr> <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> <td>Item 5A</td> <td>Item 5B</td> <td>Item 5C</td> </tr> </table>