Overlay on table cell on hover of first cell

Question

I have create a table listing. When user hover the first cell that is with 3 dots Edit and Delete option are displayed and below that there is a transparent background.

Everything is fine when content is in single line.

Issue is when there is more content. The height of overlay does not adjust. I have tried top: 0; bottom: 0; height: 100% to the .action it covers the whole table.

body {
  margin: 0
}
.table {
  display: table;
  width: 100%;
  border-bottom: 1px solid #ccc
}
.tHead,
.tRow {
  display: table-row;
  position: relative;
}
.tCell {
  display: table-cell;
  padding: 5px;
  background: #fff;
  border-top: 1px solid #ccc;
}
.tHead .tCell {
  background: #ccc;
}
.tRow:hover .tCell {
  background: #f4f4f4;
  border-color: #000;
}
.tRow:hover + .tRow .tCell {
  border-color: #000;
}
.tRow .tCell:first-child {
  width: 10px;
  cursor: pointer;
  opacity: 1
}
.menu {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: relative;
  margin-left: 5px;
  top: 3px;
  z-index: 2;
}
.menu:before,
.menu:after {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: absolute;
  content: " ";
  top: -6px;
}
.menu:before {
  top: -12px;
}
.actions {
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: 0;
  right: 0;
  margin-top: -19px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
  background: #000
}
.tCell:hover .actions {
  display: block
}

<div class="table">
  <div class="tHead">
    <div class="tCell"></div>
    <div class="tCell">Name</div>
    <div class="tCell">Age</div>
    <div class="tCell">Gender</div>
    <div class="tCell">Job Profile</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Kelly</div>
    <div class="tCell">28</div>
    <div class="tCell">Female</div>
    <div class="tCell">Web Developer</div>
  </div>
  <div class="tRow hovered">
    <div class="tCell"><span class="menu"></span>
      <span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jack

    </div>
    <div class="tCell">32</div>
    <div class="tCell">Male</div>
    <div class="tCell">Java Developer</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">
      Janaya
    </div>
    <div class="tCell">26</div>
    <div class="tCell">Female</div>
    <div class="tCell">.Net Developer</div>
  </div>
  <div class="tRow ">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jim</div>
    <div class="tCell">24</div>
    <div class="tCell">Male</div>
    <div class="tCell">Full Stack Developer</div>
  </div>
</div>

Answer 1

@Tushar .. I noticed that the bottom line of the table, the div border never gets updated on the hover.. fiddle example

.tCell:hover .menu:before, .tCell:hover .menu:after, .tCell:hover .menu { background: #000; }

Answer 2

Hope this helps you.

Use :before for the overlay on the cell and target the cells using ~ operator. I had same requirement. This is how I handled it.

body {
  margin: 0
}
.table {
  display: table;
  width: 100%;
}
.tHead,
.tRow {
  display: table-row;
  position: relative;
}
.tCell {
  display: table-cell;
  padding: 5px;
  background: #fff;
  border-top: 1px solid #ccc;
  position: relative
}
.tRow:last-child .tCell {
  border-bottom: 1px solid #ccc;
}
.tHead .tCell {
  background: #ccc;
}
.tRow:hover .tCell {
  background: #f4f4f4;
  border-color: #000;
}
.tRow .tCell:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  top: 0;
  left: 0;
  display: none;
}
.tRow:hover + .tRow .tCell {
  border-color: #000;
}
.tRow .tCell:first-child {
  width: 10px;
  cursor: pointer;
  opacity: 1
}
.menu {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: relative;
  margin-left: 5px;
  top: 3px;
  z-index: 3;
}
.menu:before,
.menu:after {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: absolute;
  content: " ";
  top: -6px;
}
.menu:before {
  top: -12px;
}
.actions {
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 4;
  left: 0;
  right: 0;
  margin-top: -19px;
  padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
  background: #000
}
.tCell:hover .actions {
  display: block
}
.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
  display: block;
}

<div class="table">
  <div class="tHead">
    <div class="tCell"></div>
    <div class="tCell">Name</div>
    <div class="tCell">Age</div>
    <div class="tCell">Gender</div>
    <div class="tCell">Job Profile</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Kelly</div>
    <div class="tCell">28</div>
    <div class="tCell">Female</div>
    <div class="tCell">Web Developer</div>
  </div>
  <div class="tRow hovered">
    <div class="tCell"><span class="menu"></span>
      <span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jack

    </div>
    <div class="tCell">32</div>
    <div class="tCell">Male</div>
    <div class="tCell">Java Developer</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">
      Janaya
    </div>
    <div class="tCell">26</div>
    <div class="tCell">Female</div>
    <div class="tCell">.Net Developer</div>
  </div>
  <div class="tRow ">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jim</div>
    <div class="tCell">24</div>
    <div class="tCell">Male</div>
    <div class="tCell">Full Stack Developer</div>
  </div>
</div>