如何在Wordpress中使用交替的行颜色创建表格,并在鼠标悬停时突出显示行。
<div style="overflow-x: auto;">
<table style="font-size: 16px; border: 1px solid black;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="background-color: #4caf50; color: white;">
<td colspan="4">
<p style="text-align: center;">Flower Seeds</p>
</td>
</tr>
<tr style="background-color: #4caf50; color: white;">
<td colspan="2" align="center">
<p align="center"><b>For Winter</b></p>
</td>
<td colspan="2" align="center">
<p align="center"><b>For Summer and Monsoon</b></p>
</td>
</tr>
<tr>
<td valign="bottom">
<p align="center"><span style="color: #ff0000; font-family: Arial; font-size: medium;"><b>Sowing From </b></span><span style="color: #ff0000; font-family: Arial; font-size: medium;"><b>Seedling</b></span></p>
</td>
<td valign="bottom">
<p align="center"><span style="color: #ff0000; font-family: Arial; font-size: medium;"><b>Direct Sowing From Seed</b></span></p>
</td>
<td valign="bottom">
<p align="center"><span style="color: #ff0000; font-family: Arial; font-size: medium;"><b>Sowing From Seedling</b></span></p>
</td>
<td valign="bottom">
<p align="center"><span style="color: #ff0000; font-family: Arial; font-size: medium;"><b>Direct Sowing From Seed</b></span></p>
</td>
</tr>
<tr>
<td valign="bottom"><span style="color: #000000; font-family: Arial; font-size: medium;">Acroclineum (Helipterum)</span></td>
<td valign="bottom"><span style="color: #000000; font-family: Arial; font-size: medium;">Alyssum (Lobularia)</span></td>
<td valign="bottom"><span style="color: #000000; font-family: Arial; font-size: medium;">African Marigold orange</span></td>
<td valign="bottom"><span style="color: #000000; font-family: Arial; font-size: medium;">Balsam</span></td>
</tr>
答案 0 :(得分:1)
点击此处 jsfiddle
因为您没有提供有关颜色或要突出显示的行的更多详细信息。我做了这个例子。你可以改变你想要的方式
tr:nth-child(odd) {
background:black;
}
tr:nth-child(odd):hover{
background:red;
}
tr:nth-child(even) {
background:white;
}
tr:nth-child(even):hover {
background:blue;
}
让我知道它是否有帮助。