After addition of sticky column in Angular Material, mouse hover on the column is not working on table row

user_14028334 0
Viewed 117

I was adding adding box-shadow on hover of row, but sticky doesn't show box shadow as non-sticky cell have box shadow

.mat-row:hover {
    background: #d00e0eec;
    height: 2.125rem;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.10) !important;
    position: relative;
}

ID and Project Name is sticky column.

How to get to box-shadow ? enter image description here

EDIT 1: Here I'm using Angular Material table. I made the row position relative because I couldn't apply a box shadow to the table row. After that, the box shadow appeared.

Now I wanted to make the first column sticky, so I did. Now that the sticky column has been added, now box shadow doesn't appears on sticky column rows.

angular-material angular
2 Answers

Try adding below css to table element.

.mat-table {
    border-collapse: separate;
}
user_73130480

Made quick snippet and it seems to work fine, can you post your html code as well and more of your CSS

or try with(apply the below css only to the desired row)

.mat-row {
border-spacing: 6px; 
}


div {
  display: flex;
  max-height: 20rem;
  overflow: auto;
}

table {
  border-spacing: 0;
}

th {
  text-align: left;
}

th,
td {
  border-bottom: 1px solid #c6c6c6;
  height: 5rem;
  white-space: nowrap;
  padding-right: 2rem;
}


.fixed-top {
background-color: white;
  position: sticky;
  top: 0;
  z-index: 2;
}

.fixed-top:hover {
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.30) !important;
}
<div>
  <table>
    <thead>
      <tr>
        <th class="fixed-top">ID</th>
        <th class="fixed-top">Project Name</th>
        <th class="fixed-top">gory</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>test 1</td>
        <td class="observed-row">1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>test</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>test </td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td>test 4</td>
        <td></td>
      </tr>
       <tr>
        <td>5</td>
        <td>test 5</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

user_114477200
Related