以前曾经问过这个问题,但是当你进入更复杂的表格时,大多数人接受和使用的答案实际上并不是100%。
在此处查看原始帖子:Alternate row colors when you have rowspan
Nick Craver的答案是表格ulitizing rowpans的一个很好的解决方案。但是当你开始用colspans拆分列时,更复杂的东西似乎开始破坏了。
我认为问题可能与colspan有关,但我无法解读确切的问题。
我已经整理了一张复杂的表格(类似于我正在尝试使用的表格),它展示了Nick Craver最初的建议中的问题。
访问Nick在此处设置的jsFiddle页面:http://jsfiddle.net/nick_craver/JtPw5/
将此表格粘贴到HTML部分以对其进行测试:
<table class="altRow" cellspacing="0" cellpadding="20">
<tbody>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td rowspan="2">
<h4>Rowspan of 2 - No issues here</h4>
</td>
<td colspan="2">
<p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$600</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$300</p>
</td>
</tr>
<tr>
<td rowspan="2">
<h4>Rowspan of 2 - No issues here</h4>
</td>
<td colspan="2">
<p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$600</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$300</p>
</td>
</tr>
<tr>
<td rowspan="2">
<h4>Rowspan of 2 - No issues here</h4>
</td>
<td colspan="2">
<p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$600</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$300</p>
</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td colspan="4">Simple Row - No Rowspan, just a colspan of 4</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<h4>Rowspan of 2 - No issues here</h4>
</td>
<td colspan="2">
<p>ENERGY STAR 95 per cent AFUE or better with DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$600</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Zero Clearance Gas Furnace 90 per cent AFUE with a DC variable speed motor <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$300</p>
</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td rowspan="4">
<h4>Complex Row Example</h4>
</td>
<td colspan="2">
<p>CAN/CSA-C448 compliant, new ground source heat pump installation - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p> $4375</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>CAN/CSA-C448 compliant, ground source heat pump replacement - that is certified by the Canadian GeoExchange Coalition <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$1750 </p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>CAN/CSA-C448 compliant, new shared ground source heat pump serving three or more homes that is certified by the Canadian GeoExchange Coalition</p>
</td>
<td>
<p>One incentive per shared loop</p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
<tr>
<td>
<p>One for each distribution system in the shared loop <span class="star-icon-graphic">*</span></p>
</td>
<td class="table-rebate-column">
<p>$0 </p>
</td>
</tr>
</tbody>
</table>
正如你所看到的那样,它没有被显示出来。并且看起来即使简单的行在它们上面有一个colspan时也无法正常工作。
我已经修好了但似乎无法弄明白。任何人都可以一劳永逸地解决这个问题!?我敢肯定,对于那些涉及大量表格数据的项目的网页设计师来说,这将会受益。