如何制作表格和全宽？

Question

我无法设置宽度100%和文字middle。正如我在表格中提到的，The problem is here这个地方不是100％宽度，文字不在中心。我该怎么做呢？

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

谢谢

Answer 1

可以使用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>

您也可以考虑从表结构中取出行（避免嵌套可能比使用colspan更好，因为您不需要知道列号）

Answer 2

由于每行中有3个cols，要在单个单元格行中生成td，我们需要使用colspan attribute，然后text-align规则可用于居中对齐文字

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