Table tr make box-shadow on hover (background conflict)

Question

I'm having trouble with a box shadow on hover and table <TD> background.

<table class="table-z">
  <tr>
    <td class="w6">
      <label>
        <input type="checkbox" checked>
      </label>
    </td>
    <td class="w7">
    </td>
    <td class="w10">
      Tez Tour
    </td>
    <td class="w17">
      <div>
        tez-tour.com
      </div>
    </td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last orange ">На рассмотрении</td>
  </tr>
  <tr>
    <td class="w6">
      <input type="checkbox">
    </td>
    <td class="w7">
    </td>
    <td class="w10">Мвидео</td>
    <td class="w17">mvideo.ru</td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last red">Отказ</td>
  </tr>
</table>

How can I make tr box shadow on hover and save custom backgrounds on td?

it's showing shadow on hovering and you've added the classes in td. what's the problem you're facing ? — Muhammad Usman, Sep 27 '16 at 13:13
What should happen? You want the box-shadow hidden inside TD? — Jen, Sep 27 '16 at 13:17
Possible duplicate of [Box Shadow on table row not appearing on certain browsers](http://stackoverflow.com/questions/10874985/box-shadow-on-table-row-not-appearing-on-certain-browsers) — Pete, Sep 27 '16 at 13:22
On hover all tr shoild have a Box Shadow. Now it doesnt show in TD ifbackground not transparent — Romanoti, Sep 27 '16 at 13:56

score 1 · Answer 1 · edited Nov 14 '19 at 11:09

1

Use background color with alpha channel.

background-color: rgba(226, 226, 226, 0.3)

edited Nov 14 '19 at 11:09

Saeed Zhiany

2,051
9
30
41

answered Nov 14 '19 at 09:45

Pradeep

21
3

score 0 · Answer 2 · answered Sep 27 '16 at 15:52

You need to set a z-index for the td that allows the shadow to show on it and not under it

.table-z tr{
 height: 50px;
 text-align: center;
 font-size: 16px;
  position: relative;
}
.table-z td {
  z-index: -1;
  position: relative;
}
.table-z{
 margin-top: 10px;
 margin-left: 10px;
 width: 100%;
}

.w6{
 padding-left: 2%;
 width: 6%;
 background: yellow;
 border-left: 1px solid #e1e1e1;
 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}
.w7{
 width: 7%;
 background: yellow;
 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}

.w10{
 width: 10%;
 background: yellow;
 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}

.w17{
 width: 17%;
 background: yellow;
 border-right: 1px solid #e1e1e1;

 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}

.w16{
 width: 16%;

 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}

.w22{
 width: 22%;

 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
}

td.last{
 text-align: right;
 padding-right: 35px;

 border-top: 1px solid #e1e1e1;
 border-bottom: 1px solid #e1e1e1;
 border-right: 1px solid #e1e1e1;
}


.table-z{
 border-collapse: collapse
}

.table-z tr:last-child td:first-child {
 border-bottom-left-radius: 5px;
}

.table-z tr:last-child td:last-child {
 border-bottom-right-radius: 5px;
}

.le{
 margin-left: 10px;
 width: 240px;
}
table {
 border-collapse: collapse;
 border-radius: 5px;
 border-style: hidden; /* hide standard table (collapsed) border */
 box-shadow: 0 0 0 1px #e1e1e1; /* this draws the table border  */
}

.table-z tr:hover {
 box-shadow: 0px 0px 12px 5px red;
 cursor: pointer;
}

<table class="table-z">
  <tr>
    <td class="w6">
      <label>
        <input type="checkbox" checked>
      </label>
    </td>
    <td class="w7">
    </td>
    <td class="w10">
      Tez Tour
    </td>
    <td class="w17">
      <div>
        tez-tour.com
      </div>
    </td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last orange ">На рассмотрении</td>
  </tr>
  <tr>
    <td class="w6">
      <input type="checkbox">
    </td>
    <td class="w7">
    </td>
    <td class="w10">Мвидео</td>
    <td class="w17">mvideo.ru</td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last red">Отказ</td>
  </tr>
</table>

It works on empty project, but dont works in my big project. Id deleted all styles for table and that a screenshot what I have seen: http://joxi.ru/823OOP4ulDvl2O when mouse inter on this table all table twinkles and I see box-shadow. — Romanoti, Sep 28 '16 at 14:25

score -1 · Answer 3 · answered Sep 27 '16 at 13:26

simply change your tr to td for the hover

.table-z TD:hover {
        -webkit-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        -moz-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        cursor: pointer;
    }

Table tr make box-shadow on hover (background conflict)

3 Answers3