如何为响应式表格实现交替行样式？

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>

- Jeff Jensen

---

将两个表格都包裹在一个带有类的容器元素中，然后您可以在移动视图中使用更具体的CSS选择器。 - Brian Glaz

你知道你的表格会有多少行吗？ - Chad

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 Example

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

- TylerH