Об этом уже спрашивали, но ответ, который был принят и сработал для большинства людей, на самом деле не работает на 100%, когда вы попадаете в более сложные таблицы.
Проверьте оригинальное сообщение здесь: Альтернативные цвета строки, когда у вас есть ряд строк
Ответ Ника Крейвера - отличное решение для таблиц, использующих промежутки между строками. Но когда вы начинаете разбивать столбцы с помощью colspans и других сложностей, кажется, что они начинают ломаться.
Я думаю, что проблема может быть связана именно с colspan, хотя я не смог расшифровать ее точно.
Я собрал сложную таблицу (похожую на те, которые я пытаюсь использовать), которая демонстрирует проблемы в первоначальном предложении Ника Крейвера.
Посетите страницу 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>
Как видите, он отображается не так, как должен. И кажется, что даже простые строки не работают правильно, если на них есть кольспан.
Я возился, но не могу понять это. Кто-нибудь может решить эту проблему раз и навсегда !? Я уверен, что это пойдет на пользу многим веб-дизайнерам, у которых есть проект, включающий много табличных данных.