JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>image</th>
      <th>name</th>
      <th>age</th>
      <th>address</th>
      <th>phone</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRKoGkbnwZMrYoYmeu9_8EffU90jyo2D2P4Bxex0ALJWixLfPhD" data-src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRKoGkbnwZMrYoYmeu9_8EffU90jyo2D2P4Bxex0ALJWixLfPhD">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>

    <tr>
      <td>2</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR0ROe6kGoF0vFVqEe3SSP6XqgXKh1trbZMf3KaEGiWV_Z57UPj" data-src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR0ROe6kGoF0vFVqEe3SSP6XqgXKh1trbZMf3KaEGiWV_Z57UPj">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>

    <tr>
      <td>3</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsDi35sZepCdDGwW1k29Olc3rGI10v0NYTfGrN_cDzMhimZGPp5w" data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsDi35sZepCdDGwW1k29Olc3rGI10v0NYTfGrN_cDzMhimZGPp5w">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <div class="photo">
          <img src="http://www.axis-ballymun.ie/_fileupload/Image/axis%20gallery.JPG" data-src="http://www.axis-ballymun.ie/_fileupload/Image/axis%20gallery.JPG">
        </div>
      </td>
      <td>theinlwin</td>
      <td>24</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <div class="photo">
          <img...

CSS

table {
  display: table;
  border: 1px solid #ddd;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
tfoot td {
  color: #000;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  margin: 0;
  font-size: 30px;
  brder-right: 1px solid #ddd;
}

td {
  color: #fff;
  background-color: #000;
  border: 1px solid #ddd;
  margin: 0;
  width: 200px;
  text-align: center;
}

.photo {
  width: 200px;
  cursor: pointer;
}

.photo img {
  max-width: 200px;
}

tr {
  margin: 0;
  padding: 0;
}

.galleryBox {
  width: 600px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid red;
  overflow: hidden;
  position: absolute;
}

JavaScript

$(document).ready(function() {
  $("table td .photo").click(function(e)) {
    alert("ok");
  }
});