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

时间:2015-01-22 21:31:26

标签: javascript html css responsive-design

我认为我需要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>

1 个答案:

答案 0 :(得分:5)

您不会需要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

&#13;
&#13;
@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;
}
&#13;
<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>
&#13;
&#13;
&#13;