帶有交替行顏色並在鼠標懸停時突出顯示的Wordpress表

Question

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

Answer 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;
}

讓我知道是否有幫助。