我有两个表使用表条带。在桌面视图中,桌子并排放置。在移动设备上,它们按预期堆叠,我将表头隐藏在第二个表中,因此表一中的行直接进入表二,用于一个长表。这是很好的,除了对于表所遇到的行,条带是相同的颜色并且不交替。我如何开始第二个表格的第一个条纹相反,以便第二个表格的第一行有白色背景而不是灰色?我看到一个类似的帖子,但解决方案在我的情况下不起作用。
更新:我已经尝试了这篇文章中的所有基于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;}
}
答案 0 :(得分:0)
一种快速的方法是使用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)}
}