如何实现响应式表的交替行样式
How to achieve alternating row styles for a responsive table?
我想我需要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>你不需要 JavaScript。只需在媒体查询中使用一些伪选择器:last-child即可在移动视图中对演示文稿进行更多更改。这实质上仅在移动视图中切换第二个表的偶数/奇数背景：
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
JSFiddle 示例
@media only screen and (max-width: 480px) {
.sizesTableContent {
display:block !important;
width:100% !important;
}
.hider {
display: none;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
}
.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>相关文章：
- 当包含另一个asp文件时，是否也包含所有引用的样式和脚本页面
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空，则使用JavaScript应用CSS样式
- 如何将getJson的响应保存在全局变量中
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 定义完全独立的样式信息
- 使用angularjs向浏览器发送servlet响应(下载功能）
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 当响应式样式不再适用时删除类
- 如何实现响应式表的交替行样式
- CSS 更改样式垂直响应菜单
- 引导响应式导航栏链接对齐和样式问题
- 电子邮件响应样式覆盖了我的样式
- CSS样式的单选按钮不响应键盘
- 如何转换表格td内联样式宽度pt以转换百分比以适合响应
- 添加内联样式来响应
- 防止在调整大小后改变响应式网页样式(JavaScript)
- 响应原生样式到文本元素
- 创建具有响应样式的弹出窗口
