【发布时间】：2015-03-21 20:27:50
【问题描述】：
我认为我需要 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>【问题讨论】：
-
用一个类将两个表包装在一个容器元素中，然后您可以在移动视图中使用更具体的 css 选择器。
-
你知道你的表中有多少行吗？
标签： javascript html css responsive-design