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>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
Share Improve this question edited Nov 2, 2015 at 9:17 Har devgun 5336 silver badges25 bronze badges asked Nov 2, 2015 at 8:19 Alexander RichardAlexander Richard 1914 gold badges8 silver badges18 bronze badges 3-
1
why not just add the rule
text-align: center;to thetd– Arun P Johny Commented Nov 2, 2015 at 8:21 - you have 3 columns in some rows ... use colspan=3 in a cell if you only have one cell in a row – Jaromanda X Commented Nov 2, 2015 at 8:21
-
how about
colspan=3? As you have 3 columns, but the problem one only have 1 in that row, you need to expand it. – fuyushimoya Commented Nov 2, 2015 at 8:21
2 Answers
Reset to default 5can 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)
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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745246694a4618440.html
评论列表（0条）