начальная загрузка полосатая, начиная с противоположного цвета

Question

У меня есть две таблицы с использованием таблицы с полосками. На рабочем столе таблицы сидят рядом. На мобильных xs они складываются так, как задумано, и я скрываю заголовок таблицы на второй таблице, чтобы строки из первой таблицы перетекали прямо в таблицу два для одной длинной таблицы. Это работает хорошо, за исключением того факта, что для строк, где встречаются таблицы, чередование имеет тот же цвет и не чередуется. Как я могу начать чередование второй таблицы напротив первой, чтобы первая строка второй таблицы имела белый фон вместо серого? Я видел похожий пост, но в моем случае решение не сработало.

ОБНОВЛЕНИЕ: я попробовал все решения на основе jQuery из этого поста: Повторное применение чередования таблиц после скрытия строк (Twitter Bootstrap) и в то время как каждое из них приводит к удалению класса табличного чередования из моей таблицы, Никто вообще не добавил новый класс .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

Одним из быстрых способов сделать это является нацеливание на вторую таблицу с помощью селектора идентификатора (#) и селектора n-го типа. Таким образом, изменение относится только ко второй таблице.

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