如何实现响应式 table 的交替行样式？

Question

我想我需要 JavaScript 来解决这个问题，但这就是我需要帮助的原因（我只编辑了现有的 JavaScript - 从未创建它们）。

我有两个并排的条纹 table，当在移动设备上查看时，右边的 table 移动到左边 table 的下方看起来像一个连续的 table.

问题是 table 条纹只有在移动设备上查看时如果 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 伪选择器即可在移动视图中稍微更改演示文稿。这实质上仅在移动视图中切换第二个 table 的 even/odd 背景：

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

如何实现响应式 table 的交替行样式？

How to achieve alternating row styles for a responsive table?

html

javascript

css

responsive-design