<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div id="wrap">
  
    <div id="pop">
      <div id="pop-container">
        <div id="pop-frame">
          <div id="pop-close"></div>
          <ul id="pop-list"></ul>
        </div>
      </div>
    </div>
    
    <table class="table">
      <tr>
        <td>Data #1</td>
        <td>Description #1</td>
        <td>Image #1</td>
        <td>Notes #1</td>
      </tr>
      
      <tr>
        <td>Data #2</td>
        <td>Description #2</td>
        <td>Image #2</td>
        <td>Notes #2</td>
      </tr>
      
      <tr>
        <td>Data #3</td>
        <td>Description #3</td>
        <td>Image #3</td>
        <td>Notes #3</td>
      </tr>
      
      <tr>
        <td>Data #4</td>
        <td>Description #4</td>
        <td>Image #4</td>
        <td>Notes #4</td>
      </tr>
    </table>
    
  </div>
  
</body>
</html>
html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
  font-size: 18px;
  font-family: monospace;
  line-height: 1.4;
}

#wrap {
  width: 100%;
  max-width: 980px;
  margin: auto;
  padding: 20px;
}

table {
  width: 100%;
  border: 0;
  border-collapse: collapse;

  tr {
    cursor: pointer;
    user-select: none;

    &:hover {
      background-color: #eee;
    }

    td {
      padding: 16px;
      border: 1px solid #eee;
    }
  }
}

#pop {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: fade(#fff, 50%);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  transition-property: opacity, visibility;

  &-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 32px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 36px 8px fade(#000, 15%);
    transition: transform .3s ease;
    transform: translateY(5%);
  }

  &-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    opacity: .5;
    transition: opacity .2s ease;
    cursor: pointer;

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 2px;
      height: 100%;
      background-color: #000;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
    
    &:hover {
      opacity: 1;
    }
  }

  &.shown {
    opacity: 1;
    visibility: visible;
    
    #pop {
      &-frame {
        transform: translateY(0);
      }
    }
  }

  &-list {
    padding: 0;
    margin: 0;

    li {
      display: block;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
View Compiled 
$(function () {
  var $table = $('.table'),
    $pop = $('#pop'),
    $popClose = $('#pop-close'),
    $popList = $('#pop-list');
  
  $table.find('tr').dblclick(function() {
    var $cell = $(this).find('td');
    
    $popList.empty();
    
    for(var i = 0; i < $cell.length; i++) {
      var cellData = $cell.eq(i).text();
      
      $popList.append('<li>' + cellData + '</li>');
    }
    
    $pop.addClass('shown');
  });
  
  $popClose.click(function() {
    $pop.removeClass('shown');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js