如何使高亮显示的表行跨度

Question

我有rowspan的一个表，这是我的HTML代码：

<table width="800" cellpadding="5" border="1"> 
    <tr class="head"> 
     <th>NO.</th> 
     <th>FOOD NAME</th> 
     <th>TYPE</th> 
     <th>STATUS</th> 
    </tr> 
    <tr class='row'> 
     <td rowspan='2' align='center'>1.</td> 
     <td rowspan='2'>Mozarella Cheese</td> 
     <td>Regular</td> 
     <td rowspan='2' align='center'>Available</td> 
    </tr> 
    <tr class='row'> 
     <td>Premium</td> 
    </tr> 
    <tr class='row'> 
     <td rowspan='2' align='center'>2.</td> 
     <td rowspan='2'>Greentea Milk</td> 
     <td>Regular</td> 
     <td rowspan='2' align='center'>Available</td> 
    </tr> 
    <tr class='row'> 
     <td>Premium</td> 
    </tr> 
</table> 

这里是我的CSS代码：

.head { 
    background: rgb(206,220,231); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedce7', endColorstr='#596a72',GradientType=0); /* IE6-9 */} 

.head th { 
    padding:10px; 
    color:#333; 
    text-shadow:1px 1px 0px #CCC; 
    font-size:14px; 
} 

.row { 
    background-color:#E0E0E0; 
    font-size:12px; 
} 

.row:hover td[rowspan] { 
    background: #00FF33; 
    font-weight:bold; 
    cursor:pointer; 
} 
.row:hover td[rowspan]:hover ~ tr { 
    background: #00FF33; 
    font-weight:bold; 
    cursor:pointer; 
} 

我想要的每一行我表格突出显示，但它不能很好地与我上面的CSS代码一起使用。我怀疑是因为我的桌子上有一个排骨，所以效果不好。我能做些什么来解决我的问题？如何使用rowspan突出显示表格？

Answer 1

您可以在示例中添加一个特殊的钩子类到“Premium”单元中。然后将它们定位在主要的.row:hover状态。

此外，您不需要td[rowspan]部分。

考虑下面的代码：

.head { 
 
    background: rgb(206,220,231); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedce7', endColorstr='#596a72',GradientType=0); /* IE6-9 */} 
 

 
.head th { 
 
    padding:10px; 
 
    color:#333; 
 
    text-shadow:1px 1px 0px #CCC; 
 
    font-size:14px; 
 
} 
 

 
.row { 
 
    background-color:#E0E0E0; 
 
    font-size:12px; 
 
} 
 

 
.row:hover td, .row:hover + .premium td { 
 
    background: #00FF33; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
} 
 
.row:hover td:hover ~ tr { 
 
    background: #00FF33; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
}

<table width="800" cellpadding="5" border="1"> 
 
    <tr class="head"> 
 
     <th>NO.</th> 
 
     <th>FOOD NAME</th> 
 
     <th>TYPE</th> 
 
     <th>STATUS</th> 
 
    </tr> 
 
    <tr class='row'> 
 
     <td rowspan='2' align='center'>1.</td> 
 
     <td rowspan='2'>Mozarella Cheese</td> 
 
     <td>Regular</td> 
 
     <td rowspan='2' align='center'>Available</td> 
 
    </tr> 
 
    <tr class='row premium'> 
 
     <td>Premium</td> 
 
    </tr> 
 
    <tr class='row'> 
 
     <td rowspan='2' align='center'>2.</td> 
 
     <td rowspan='2'>Greentea Milk</td> 
 
     <td>Regular</td> 
 
     <td rowspan='2' align='center'>Available</td> 
 
    </tr> 
 
    <tr class='row premium'> 
 
     <td>Premium</td> 
 
    </tr> 
 
</table>

我会考虑可能创造一个更好的标记结构，因为这是不容易维护的代码，但你可以在上面看到它绝对可以工作。