如何使高亮顯示的錶行跨度

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>

我會考慮可能創造一個更好的標記結構，因爲這是不容易維護的代碼，但你可以在上面看到它絕對可以工作。