我正在使用下面的HTML和CSS代码创建一个包含分组行的表，其中组和行都对悬停事件做出反应：
.c-table-display {
border-spacing: 1px;
border-bottom: 1px solid #dedede;
width: 100%;
}
.c-table-display__row-odd {
background-color: #f3f7fc;
color: #263340;
font-size: 12px;
font-weight: normal;
height: 20px;
text-align: left;
}
.c-table-display__row-odd>td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__row-even {
background-color: #deecf8;
color: #263340;
font-size: 12px;
font-weight: normal;
height: 20px;
text-align: left;
}
.c-table-display__row-even>td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__body--highlightable:hover tr {
cursor: pointer;
background: #E3EBDE;
}
tr.c-table-display__row--highlightable:hover {
background: #FFE56F;
cursor: pointer;
}
.c-table-display__body--highlightable:hover td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__row--highlightabe:hover td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__cell--icon {
text-align: center;
}
.c-table-display__cell--icon>img {
vertical-align: middle;
}<table class="u-width-full c-table-display">
<tbody class="c-table-display__body c-table-display__body--highlightable">
<tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="102">
<td>'test</td>
<td title="unique">
unique
</td>
<td title="">
</td>
<td title="">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
</tr>
<tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
<td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
</td>
<td title="valuevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevalueva">
valuevaluevaluevaluevaluevaluevaluevaluevaluevalue...
</td>
<td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
</tr>
</tbody>
</table>我遇到的问题是，如果我将鼠标悬停在 2 个单元格之间的空间上，则行和组都不会获得悬停效果。如何解决此问题，最好在不删除边框间距的情况下？我宁愿不使用Javascript，因为我们之前使用的是Javascript实现，这导致了悬停效果挥之不去的问题。
.c-table-display {
//border-spacing: 1px;
border-bottom: 1px solid #dedede;
width: 100%;
}
.c-table-display__row-odd {
background-color: #f3f7fc;
color: #263340;
font-size: 12px;
font-weight: normal;
height: 20px;
text-align: left;
}
.c-table-display__row-odd>td {
vertical-align: middle;
padding: 0 4px;
border: 1px solid white;
}
.c-table-display__row-even {
background-color: #deecf8;
color: #263340;
font-size: 12px;
font-weight: normal;
height: 20px;
text-align: left;
}
.c-table-display__row-even>td {
vertical-align: middle;
padding: 0 4px;
border: 1px solid white;
}
.c-table-display__body--highlightable:hover tr {
cursor: pointer;
background: #E3EBDE;
}
tr.c-table-display__row--highlightable:hover {
background: #FFE56F;
cursor: pointer;
}
.c-table-display__body--highlightable:hover td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__row--highlightabe:hover td {
vertical-align: middle;
padding: 0 4px;
}
.c-table-display__cell--icon {
text-align: center;
}
.c-table-display__cell--icon>img {
vertical-align: middle;
}<table cellspacing="0" cellpadding="0" class="u-width-full c-table-display">
<tbody class="c-table-display__body c-table-display__body--highlightable">
<tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row change" machinerowid="17" parameterrowid="102">
<td>'test</td>
<td title="unique">
unique
</td>
<td title="">
</td>
<td title="">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
</tr>
<tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
<td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
</td>
<td title="valuevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevalueva">
valuevaluevaluevaluevaluevaluevaluevaluevaluevalue...
</td>
<td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
<td class="c-table-display__cell c-table-display__cell--icon">
</td>
</tr>
</tbody>
</table>您可以删除和单元格间距并添加tdborder间距，现在只需为第一个和最后一个孩子设置边框顶部底部属性，您就可以开始了。
如果您有任何疑问，请通知我。