从相反颜色开始的引导表条纹

Question

我有两个使用表格条纹的表格。在桌面视图中，桌子并排放置。在移动 xs 上，它们按预期堆叠，我将表头隐藏在第二个表上，因此表一中的行直接流入表二，用于一张长表。这工作得很好，除了对于表格相交的行，条纹是相同的颜色并且不交替。如何开始第二个表的条带与第一个相反，以便第二个表的第一行具有白色背景而不是灰色？我看到了一个有点相似的帖子，但该解决方案在我的情况下不起作用。

更新：我已经尝试了这篇文章中所有基于 jQuery 的解决方案：Reapply table striping after hiding rows (Twitter Bootstrap)，虽然每个都有从我的表中删除 table-striped 类的效果，但没有一个添加新的 .stripe 类，不少于符合预期。

<!-- skills container left -->
<div class="col-md-6 col-sm-6 col-xs-12 xs-no-padding-lr xs-margin-three-lr skills">

    <!-- row -->
    <div class="row">
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th>Technology</th>
                    <th>Proficiency</th>                                                                    
                </tr>
            </thead>
            <tbody>
                <tr><td>AJAX</td><td>Intermediate</td></tr>
                <tr><td>Angular.js</td><td>Novice</td></tr>
                <tr><td>ASP.NET</td><td>Intermediate</td></tr>
                <tr><td>Bootstrap</td><td>Intermediate</td></tr>
                <tr><td>CSS</td><td>Advanced</td></tr>
                <tr><td>C#</td><td>Intermediate</td></tr>
                <tr><td>Express.js</td><td>Novice</td></tr>
                <tr><td>HTML5</td><td>Advanced</td></tr>
                <tr><td>Java</td><td>Novice</td></tr>
                <tr><td>Javascript</td><td>Intermediate</td></tr>
                <tr><td>jQuery</td><td>Intermediate</td></tr>                                                                
            </tbody>
        </table>

    </div>
    <!-- row -->

</div>
<!-- end skills container left -->

<!-- skills container right -->
<div class="col-md-6 col-sm-6 col-xs-12 xs-margin-five-bottom xs-no-padding-lr xs-margin-three-lr skills">

    <!-- row -->
    <div class="row">

        <table id="skillstabletwo" class="table table-striped table-condensed">
            <thead class="skillsheadertwo">
                <tr>
                    <th>Technology</th>
                    <th>Proficiency</th>
                </tr>
            </thead>
            <tbody>
                <tr ><td>MSSQL</td><td>Intermediate</td></tr>
                <tr ><td>MySQL</td><td>Intermediate</td></tr>
                <tr ><td>Node.js</td><td>Novice</td></tr>
                <tr ><td>Photoshop</td><td>Advanced</td></tr>
                <tr ><td>PHP</td><td>Intermediate</td></tr>
                <tr ><td>Python</td><td>Novice</td></tr>
                <tr ><td>ReactJS</td><td>Novice</td></tr>
                <tr ><td>Ruby</td><td>Novice</td></tr>
                <tr ><td>Ruby On Rails</td><td>Novice</td></tr>
                <tr ><td>Visual Basic</td><td>Intermediate</td></tr>
                <tr ><td>XML</td><td>Intermediate</td></tr>
            </tbody>
        </table>          

    </div>
    <!-- end row -->

</div>
<!-- end skills container right-->

---

.skills table {
    width: 97%; margin-left:1%; 
}

.skills th {text-transform:none; font-weight:700; font-size:18px; }
.skills td {font-weight:200; font-size:16px; color: #606060; }

@media only screen and (max-width: 767px) {
    .skills table {width:90%; margin-top:-20px;}
    .skills th, td {display:inline-block;  width:50%; }
    .skillsheadertwo {display:none;}
}

Answer 1

一种快速的方法是使用 id 选择器 (#) 和 nth-of-type 选择器来定位第二个表。这样，更改仅适用于第二个表。

@media only screen and (max-width: 767px) {
    .skills table {width:90%; margin-top:-20px;}
    .skills th, td {display:inline-block;  width:50%; }
    .skillsheadertwo {display:none;}

    #skillstabletwo tbody tr:nth-of-type(odd){background-color:white;}
    #skillstabletwo tbody tr:nth-of-type(even){background-color:rgba(0,0,0,.05)}
}