Question

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

更新：我已经尝试了这篇文章中的所有基于jQuery的解决方案：Reapply table striping after hiding rows (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

一种快速的方法是使用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)}
}

bootstrap table-striped以相反的颜色开始

1 个答案: