表格行悬停-排除特定单元格？

Question

我制作了一个价格表，将其悬停时将更改行的背景。由于我使用它的方式，我遇到了两个问题。

1. 我正在使用3行跨度来按住购买按钮，因为我希望它在中心垂直对齐，并在左侧向左对齐。我必须使用！important才能在翻转时保持背景白色。固定。

2. 将鼠标悬停在购买按钮单元格上时，它会突出显示第一行。这就是我所不想要的。我已经尝试过各种方法并重新安排了方法，并且在不除去3行跨度的情况下无法提出任何解决方案。

jsfiddle

<table>
<tr>
    <th colspan="3">title text</th>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
    <td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
</table>


table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}

table td{
padding:2px 5px;
}

table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}

table tr:hover td
{
background-color: #ebf1f6;
}

Answer 1

你可以检查答案

超文本标记语言

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2" scope="row">title text </td>
  </tr>
  <tr>
    <td width="75%" scope="row">
        <table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
        </table>    
    </td>
    <td width="25%">Purchace</td>
  </tr>
</table>

CSS

.amount_table tr:hover{
  background:gray
}