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 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQzFZOpOYt6U6qhDrTPDzbZC9UaBpE2JvG9HBR8G5A6fqu2zawp"...

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");
  }
});