Wordpress表与交替行颜色和鼠标悬停突出显示

时间:2016-07-20 11:24:26

标签: html css wordpress html-table

如何在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>

1 个答案:

答案 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;
}

让我知道它是否有帮助。