如何為響應表實現交替行樣式？

Question

我想我需要JavaScript來解決這個問題，但這就是我需要幫助的原因（我只編輯了現有的JavaScript - 從未創建過它們）。

我有兩個並排的條紋表，當在移動設備上查看時，右邊的表移動到左邊的表下方，看起來像一個連續的表。

問題是只有在移動設備上查看表條帶時，如果tbody行計數是偶數，我最終在中間有兩個連續的行是相同的顏色。

 @media only screen and (max-width: 480px) { .sizesTableContent { display:block !important; width:100% !important; } .hider { display: none; } } .sizesAsterisk { width:100%; border-collapse: collapse; text-align: left; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; } .hanging { text-indent: -0.5em; padding-left: 0.5em; } .sizesTableContent { vertical-align: top; } .sizesTwoColumn { width:100%; border-collapse: collapse; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .sizes { border-collapse: collapse; white-space: nowrap; width: 100%; text-align: center; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; } .sizes td:first-child { text-align: left; font-weight: bold; } .sizes th { border-bottom: 1pt solid #000000; vertical-align: bottom; font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; } .sizes th:first-child { text-align: left; } .sizes tbody tr:hover { background: #D2DAE3; } .sizes tbody tr:nth-child(odd) { background: #ffffcc; } .sizes tbody tr:nth-child(odd):hover { background: #D2DAE3; } 

 <table class="sizesAsterisk"> <tr> <td> <table class="sizesTwoColumn"> <tr> <td class="sizesTableContent"> <table class="sizes" cellspacing="0" cellpadding="0"> <col width="33.3%"> <col width="33.3%"> <col width="33.4%"> <thead> <tr> <th>Size in <br/>Inches</th> <th>Lbs. <br/>Per Ft</th> <th>Est. Lbs. <br/>Per 20' Bar</th> </tr> </thead> <tbody> <!--First column size data go between the tbody tags--> <tr> <td>1" x 1/4</td> <td>.620</td> <td>12.40</td> </tr> <tr> <td>1-1/4 x 5/15</td> <td>.960</td> <td>19.20</td> </tr> <tr> <td>1-1/2 x 5/16</td> <td>1.180</td> <td>23.60</td> </tr> </tbody> </table> </td> <td class="hider" style="border-right: 1px solid #000000" width="14px"></td> <td class="hider" width="14px"></td> <td class="sizesTableContent"> <table class="sizes" cellspacing="0" cellpadding="0"> <col width="33.3%"> <col width="33.3%"> <col width="33.4%"> <thead class="hider"> <tr> <th>Size in <br/>Inches</th> <th>Lbs. <br/>Per Ft</th> <th>Est. Lbs. <br/>Per 20' Bar</th> </tr> </thead> <tbody> <!--Second column size data go between the tbody tags--> <tr> <td>1-1/2 x 7/16</td> <td>1.560</td> <td>31.20</td> </tr> <tr> <td>1-3/4 x 7/16<span style="color:red"> *</span> </td> <td>1.910</td> <td>38.20</td> </tr> <tr> <td>2" x 1/2<span style="color:red"> *</span> </td> <td>2.587</td> <td>51.74</td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> <tr> <td class="hanging"><!--Asterisk notes go between the td tags--> <span style="color:red">* </span>Also in 10' Lengths. </td> </tr> </table> 

Answer 1

你不需要JavaScript。 只需在媒體查詢中使用一些:last-child偽選擇器，即可在移動視圖中更多地更改演示文稿。 這實際上只在移動視圖中切換第二個表的偶數/奇數背景：

.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
    background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
    background: #ffffcc;
}

JSFiddle示例

 @media only screen and (max-width: 480px) { .sizesTableContent { display:block !important; width:100% !important; } .hider { display: none; } .sizesTableContent:last-child .sizes tbody tr:nth-child(odd) { background: #fff; } .sizesTableContent:last-child .sizes tbody tr:nth-child(even) { background: #ffffcc; } } .sizesAsterisk { width:100%; border-collapse: collapse; text-align: left; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; } .hanging { text-indent: -0.5em; padding-left: 0.5em; } .sizesTableContent { vertical-align: top; } .sizesTwoColumn { width:100%; border-collapse: collapse; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .sizes { border-collapse: collapse; white-space: nowrap; width: 100%; text-align: center; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; } .sizes td:first-child { text-align: left; font-weight: bold; } .sizes th { border-bottom: 1pt solid #000000; vertical-align: bottom; font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; } .sizes th:first-child { text-align: left; } .sizes tbody tr:hover { background: #D2DAE3; } .sizes tbody tr:nth-child(odd) { background: #ffffcc; } .sizes tbody tr:nth-child(odd):hover { background: #D2DAE3; } 

 <table class="sizesAsterisk"> <tr> <td> <table class="sizesTwoColumn"> <tr> <td class="sizesTableContent"> <table class="sizes" cellspacing="0" cellpadding="0"> <col width="33.3%"> <col width="33.3%"> <col width="33.4%"> <thead> <tr> <th>Size in <br/>Inches</th> <th>Lbs. <br/>Per Ft</th> <th>Est. Lbs. <br/>Per 20' Bar</th> </tr> </thead> <tbody> <!--First column size data go between the tbody tags--> <tr> <td>1" x 1/4</td> <td>.620</td> <td>12.40</td> </tr> <tr> <td>1-1/4 x 5/15</td> <td>.960</td> <td>19.20</td> </tr> <tr> <td>1-1/2 x 5/16</td> <td>1.180</td> <td>23.60</td> </tr> </tbody> </table> </td> <td class="hider" style="border-right: 1px solid #000000" width="14px"></td> <td class="hider" width="14px"></td> <td class="sizesTableContent"> <table class="sizes" cellspacing="0" cellpadding="0"> <col width="33.3%"> <col width="33.3%"> <col width="33.4%"> <thead class="hider"> <tr> <th>Size in <br/>Inches</th> <th>Lbs. <br/>Per Ft</th> <th>Est. Lbs. <br/>Per 20' Bar</th> </tr> </thead> <tbody> <!--Second column size data go between the tbody tags--> <tr> <td>1-1/2 x 7/16</td> <td>1.560</td> <td>31.20</td> </tr> <tr> <td>1-3/4 x 7/16<span style="color:red"> *</span> </td> <td>1.910</td> <td>38.20</td> </tr> <tr> <td>2" x 1/2<span style="color:red"> *</span> </td> <td>2.587</td> <td>51.74</td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> <tr> <td class="hanging"> <!--Asterisk notes go between the td tags--> <span style="color:red">* </span>Also in 10' Lengths.</td> </tr> </table>