Note that there are some explanatory texts on larger screens.

plurals
  1. POTable row hovering - exclude specific cell?
    primarykey
    data
    text
    <p>I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.</p> <ol> <li><p>there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.</p></li> <li><p>when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.</p></li> </ol> <p><a href="http://jsfiddle.net/ae8uU/" rel="nofollow noreferrer">jsfiddle</a></p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;th colspan="3"&gt;title text&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;amount&lt;/td&gt; &lt;td class="pricing"&gt;price&lt;/td&gt; &lt;td class="purchase" rowspan="3"&gt;purchase button&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;amount&lt;/td&gt; &lt;td class="pricing"&gt;price&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;amount&lt;/td&gt; &lt;td class="pricing"&gt;price&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload