I am writing such a thing .

I would like to highlight the column with the product, well, somehow add a frame so that the element stands out from the general table, there is no highlighting or shadow, in the example there is no, but I tried to fasten the selection in this way, added to css

.pricing-hover { background-color: #606060; }

In html I added id to make it easier to find the table inside by changing:

 <div class="membership-pricing-table">

on

 <div id="wedding-prices" class="membership-pricing-table">

js wrote this:

 $(document).ready(function() { var table = $('#wedding-prices table'); table.delegate('td','mouseover mouseleave', function(e) { if (e.type == 'mouseover') { var el = $(this); pos = el.index(); el.parent().find("th, td").addClass("pricing-hover"); table.filter(":nth-child(" + (pos+1) + ")").addClass("pricing-hover"); } else { table.find("th, td").removeClass("pricing-hover"); } }); });

Not sure if it will highlight the entire column directly, but at least it adds hover some td class. But the selection color does not change, it turns out that the external class from css .membership-pricing-table table td {...} for some reason redefines the background color, although in the css it is registered earlier than the pricing-hover .

Can an individual td not set the background right in them? Where did the underwater rock disappear? Is there any solution to allocating a column with cells?

    1 answer 1

    Option 1:

     $(document).ready(function() { var table = $('.table-responsive table'); table.delegate('td', 'mouseover mouseleave', function(e) { if (e.type == 'mouseover') { var el = $(this); tdI = el.index(); var rows = table.find('tr'); for (var i = 0; i < rows.length; i++) { $(rows[i]).find('td').eq(tdI).addClass("pricing-hover"); } } else { table.find("th, td").removeClass("pricing-hover"); } }); }); 
     .membership-pricing-table { width: 920px } .membership-pricing-table table .icon-no, .membership-pricing-table table .icon-yes { font-size: 22px } .membership-pricing-table table .icon-no { color: #a93717 } .membership-pricing-table table .icon-yes { color: #209e61 } .membership-pricing-table table .plan-header { text-align: center; font-size: 48px; border: 1px solid #e2e2e2; padding: 25px 0 } .membership-pricing-table table .plan-header-free { background-color: #eee; color: #555 } .membership-pricing-table table .plan-header-blue { color: #fff; background-color: #61a1d1; border-color: #3989c6 } .membership-pricing-table table .plan-header-standard { color: #fff; background-color: #ff9317; border-color: #e37900 } .membership-pricing-table table td { text-align: center; width: 15%; padding: 7px 10px; background-color: #fafafa; font-size: 14px; -webkit-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset } .membership-pricing-table table, .membership-pricing-table table td { border: 1px solid #ebebeb } .membership-pricing-table table tr td:first-child { background-color: transparent; text-align: right; width: 24% } .membership-pricing-table table tr td:nth-child(5) { background-color: #FFF } .membership-pricing-table table tr:first-child td, .membership-pricing-table table tr:nth-child(2) td { -webkit-box-shadow: none; box-shadow: none } .membership-pricing-table table tr:first-child th:first-child { border-top-color: transparent; border-left-color: transparent; border-right-color: #e2e2e2 } .membership-pricing-table table tr:first-child th .pricing-plan-name { font-size: 22px } .membership-pricing-table table tr:first-child th .pricing-plan-price { line-height: 35px } .membership-pricing-table table tr:first-child th .pricing-plan-price>sup { font-size: 45% } .membership-pricing-table table tr:first-child th .pricing-plan-price>span { font-size: 30% } .membership-pricing-table table tr:first-child th .pricing-plan-period { margin-top: -7px; font-size: 25% } .membership-pricing-table table .header-plan-inner { position: relative } .membership-pricing-table table .recommended-plan-ribbon { box-sizing: content-box; background-color: #dc3b5d; color: #FFF; position: absolute; padding: 3px 6px; font-size: 11px!important; font-weight: 500; left: -6px; top: -22px; z-index: 99; width: 100%; -webkit-box-shadow: 0 -1px #c2284c inset; box-shadow: 0 -1px #c2284c inset; text-shadow: 0 -1px #c2284c } .membership-pricing-table table .recommended-plan-ribbon:before { border: solid; border-color: #c2284c transparent; border-width: 6px 0 0 6px; bottom: -5px; content: ""; left: 0; position: absolute; z-index: 90 } .membership-pricing-table table .recommended-plan-ribbon:after { border: solid; border-color: #c2284c transparent; border-width: 6px 6px 0 0; bottom: -5px; content: ""; right: 0; position: absolute; z-index: 90 } .membership-pricing-table table .plan-head { box-sizing: content-box; background-color: #ff9c00; border: 1px solid #cf7300; position: absolute; top: -33px; left: -1px; height: 30px; width: 100%; border-bottom: none } .pricing-hover { background-color: #606060 !important; } 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="table-responsive"> <div class="membership-pricing-table"> <table> <tbody> <tr> <th></th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">TFP</div> <div class="pricing-plan-price"> 10<span>у.е.</span> </div> <div class="pricing-plan-period">срок: 2-3 месяца</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Микро</div> <div class="pricing-plan-price"> 50<span>у.е.</span> </div> <div class="pricing-plan-period">month</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Мини</div> <div class="pricing-plan-price"> 100<span>у.е.</span> </div> <div class="pricing-plan-period">срок: 2 месяца</div> </th> <th class="plan-header plan-header-standard"> <div class="header-plan-inner"> <!--<span class="plan-head"> </span>--> <span class="recommended-plan-ribbon">Рекомендуется</span> <div class="pricing-plan-name">Стандарт</div> <div class="pricing-plan-price"> 220<span>у.е.</span> </div> <div class="pricing-plan-period">срок: 1,5 месяца</div> </div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Макси</div> <div class="pricing-plan-price"> 300<span>у.е.</span> </div> <div class="pricing-plan-period">срок: 1 месяц</div> </th> </tr> <tr> <td></td> <td class="action-header"> <a class="btn btn-info"> Предложить </a> </td> <td class="action-header"> <a class="btn btn-info"> Предложить </a> </td> <td class="action-header"> <a class="btn btn-success"> Заказать </a> </td> <td class="action-header"> <a class="btn btn-success"> Заказать </a> </td> <td class="action-header"> <a class="btn btn-success"> Заказать </a> </td> </tr> <tr> <td>Съёмка сборов:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Съёмка ЗАГЗа:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Съёмка прогулки:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Съёмка до первого танца:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Съёмка до снятия фаты:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Весь отснятый материал:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Все отснятые фото с корррекцией:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Фото на DVD диске:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span> </td> </tr> <tr> <td>Продолжительность:</td> <td>2-6 часа</td> <td>2-4</td> <td>4-6</td> <td>8</td> <td>10-12</td> </tr> <tr> <td>Фотографий:</td> <td>35-50</td> <td>20-40</td> <td>100-150</td> <td>250-350</td> <td>500-600</td> </tr> </tbody> </table> </div> </div>

    Option 2 through filter ()

      $(document).ready(function() { var table = $('.table-responsive table'); table.delegate('td', 'mouseover mouseleave', function(e) { if (e.type == 'mouseover') { var el = $(this); tdI = el.index() + 1; table.find('tr td').filter(":nth-child(" + tdI + ")").addClass("pricing-hover"); } else { table.find("td").removeClass("pricing-hover"); } }); });