我有一个HTML表格,我想要一个奇数/偶数序列的彩色行,但不包括.Sectionheader类,并继续它离开的序列样式.
tr:not(.Sectionheader):nth-of-type(odd) { background-color:#fff;}tr:not(.Sectionheader):nth-of-type(even) { background-color:#f0f9ff;}tr.Sectionheader{background: red;} <table > <thead> <tr > <th colspan="3">BÖLÜM / PROGRAM</th> <th colspan="2">2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2">2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> </thead> <tbody> <tr > <th>İktisadi ve İdari Bilimler Fakültesi</th> <th>Puan Türü</th> <th>Kontenjan</th> <th>Puan</th> <th>Sıralama</th> <th>Puan</th> <th>Sıralama</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr><tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> <tr > <th colspan="3">BÖLÜM / PROGRAM</th> <th colspan="2">2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2">2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> <tr> <td>İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> </tbody> </table>
我还想在此表中第三个红色标题后面的蓝色行.
请建议我应该做什么,我在这个问题上遇到困难.
OP：这是否可以不添加额外的< tr>与.row0类？
是的,肯定有一个替代方案,事后看来,更好更有效的方法是使用另一个< tbody>.
MDN:
…multiple <tbody> elements are permitted (if consecutive),allowing the data-rows in long tables to be divIDed into different sections,each separately formatted as needed.
更改：
tr:nth-of-type(odd) { background-color: #fff; }tr:nth-of-type(even) { background-color: #f0f9ff; } 至：
tbody tr:nth-of-type(odd) { background-color: #fff; }tbody tr:nth-of-type(even) { background-color: #f0f9ff; } 并添加：
</tbody><tbody>
在最后一个tr.Sectionheader之前
片段
<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>Increased Specificity and Row 0</Title><style>tbody tr:nth-of-type(odd) { background-color: #fff; }tbody tr:nth-of-type(even) { background-color: #f0f9ff; }tr.Sectionheader.Sectionheader { background: red; }</style></head><body><table > <thead> <tr > <th colspan="3">BÖLÜM / PROGRAM</th> <th colspan="2">2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2">2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> </thead> <tbody> <tr > <th>İktisadi ve İdari Bilimler Fakültesi</th> <th>Puan Türü</th> <th>Kontenjan</th> <th>Puan</th> <th>Sıralama</th> <th>Puan</th> <th>Sıralama</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr></tbody><tbody> <tr > <th colspan="3" >BÖLÜM / PROGRAM</th> <th colspan="2" >2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2" >2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> <tr> <td>İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> </tbody></table></body></HTML> UPDATE
在重新阅读,编辑,然后重新阅读OP之后,我终于理解了这个问题,并且我对此问题有了更新的解决方案.之前发布的所有代码仍然与此更新相关且必需.
基本上,OP无法获得蓝色行来继续表格下端的红色标题.所以在阅读@ BoltClock♦post on this matter之后,突然意识到所需要的只是插入或删除一行.我选择插入一个额外的行,但我认为对表格尺寸的任何更改都可能导致布局困难.所以我想出了这个：
Do not copy & paste this code it is chopped up in fragments so you
don’t have scroll when reading.
CSS
.row0has wIDth but no height (a line). This style allows.row0to exist
in a table as a valID<tr>without altering or disturbing the table visually and layout wise.
tr.row0 { height: 0; border-spacing: 0; border: none; Font-size: 0; margin: 0; padding: 0; line-height: 0; } HTML
.row0 markup is just as minimal as it’s style. Here we have an empty
<tr>
(no children like<td>). Make sure that.row0is inserted anywhere before
the target row you plan to bump.
<tr ></tr>
现在最终的结果是：
>全部.Sectionheader是红色的.
>所有奇数< tr> (标题除外)是白色的.
>所有偶数< tr> (标题除外)是蓝色的.
>最重要的是,进行第三个标题的行的颜色现在是蓝色.
之前的代码仍然适用.
要制作交替的彩色行,请参考< tbody>那么< tr>
这是一个鲜为人知的技巧,就像！重要
在规则集上加倍.class
看看这个：
tr.Sectionheader.Sectionheader {background: red;} 现在每个.Sectionheader都是红色的,就像它本来应该的那样.要测试它,请尝试删除一个类：
tr.Sectionheader {background: red;} 你会发现现在不是每个.Sectionheader都是红色的.这个技巧增加了选择器的特异性,但并不完全像限制那样重要.
Updated Plunker
更新了代码段
<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>Increased Specificity and Row 0</Title><style>tr:nth-of-type(odd) { background-color: #fff; }tr:nth-of-type(even) { background-color: #f0f9ff; }tr.Sectionheader.Sectionheader { background: red; }tr.row0 { height: 0; border-spacing: 0; border: none; Font-size: 0; margin: 0; padding: 0; line-height: 0; }</style></head><body><table > <thead> <tr > <th colspan="3">BÖLÜM / PROGRAM</th> <th colspan="2">2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2">2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> </thead> <tbody> <tr > <th>İktisadi ve İdari Bilimler Fakültesi</th> <th>Puan Türü</th> <th>Kontenjan</th> <th>Puan</th> <th>Sıralama</th> <th>Puan</th> <th>Sıralama</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> <tr > <!-- Row 0 is an invisible line that forces the `nth-*` rows to skip the zebra strip pattern --> </tr> <tr > <th colspan="3" >BÖLÜM / PROGRAM</th> <th colspan="2" >2015 ÖSYS TABAN GENEL KONTENJAN</th> <th colspan="2" >2015 ÖSYS TAVAN GENEL KONTENJAN</th> </tr> <tr> <td >İktisat</td> <td>TM-1</td> <td>100</td> <td>416,45591</td> <td>3081</td> </tr> </tbody></table></body></HTML> 总结 以上是内存溢出为你收集整理的html – 在表格中跳过奇数行和偶数行中的某些行 – 连续的CSS样式全部内容，希望文章能够帮你解决html – 在表格中跳过奇数行和偶数行中的某些行 – 连续的CSS样式所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）