Geek Answers Handbook

Table row visibility - exclude specific cell?

I made a price table that will change the background of the line when it hangs. Due to the way I use it, I ran into two problems.

  • There are three rows of rows that I use to hold the buy button, since I want it to be vertically centered and the columns to the left. I had to use! It is important to keep the white color when capsizing. Fixed.

  • when you flip the cell of the buy button, it selects the first row. I don’t want that. I tried all kinds of things and rearranged things, and also could not come up with any solution without deleting 3 rows of lines.

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; }
+4
source share
3 answers

You can check Answer

HTML

 <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 }
-1
source

The first thing that occurred to me was to use the css property of the event-pointer . But I'm not sure if this is useful here. Check out this link (there is a jsFiddle example available)

Also consider using some javascript code to set your desired logic. I understand that you want to use only css, but js fix can be pretty small and obvious here - so why not?

0
source

I had a similar requirement: apply the background color in the row of the table when I hover over the row with the mouse pointer, except for the "selected" row that was already highlighted in a different background color.

Using 'pointer-events: none;' achieved exactly what I wanted: JsFiddle

 table#CustOrders tbody tr:hover td { background-color: LemonChiffon; } table#CustOrders tbody tr#selected { background-color: Yellow; pointer-events: none; }
0
source

More articles:


All Articles