JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<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://i.stack.imgur.com/hvA7r.jpg?s=328&g=1" data-src="https://i.stack.imgur.com/hvA7r.jpg?s=328&g=1">
      </div>
    </td>
    <td>theinlwin</td>
     <td>21</td>
     <td>KyaukTaw</td>
    <td>78955555</td>
</tr>

<tr>
    <td>2</td>
    <td>
      <div class="photo">
        <img src="https://www.gravatar.com/avatar/3bb9588b8e025e863cc50e9dc1f189f9?s=328&d=identicon&r=PG" data-src="https://www.gravatar.com/avatar/3bb9588b8e025e863cc50e9dc1f189f9?s=328&d=identicon&r=PG">
      </div>
    </td>
    <td>theinlwin</td>
     <td>22</td>
     <td>KyaukTaw</td>
    <td>78955555</td>
</tr>

<tr>
    <td>3</td>
    <td>
      <div class="photo">
        <img src="https://www.gravatar.com/avatar/8d3d9dfbd040f9cbc1a6b82f0da2b345?s=328&d=identicon&r=PG" data-src="https://www.gravatar.com/avatar/8d3d9dfbd040f9cbc1a6b82f0da2b345?s=328&d=identicon&r=PG">
      </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="https://www.gravatar.com/avatar/e514b017977ebf742a418cac697d8996?s=328&d=identicon&r=PG" data-src="https://www.gravatar.com/avatar/e514b017977ebf742a418cac697d8996?s=328&d=identicon&r=PG">
      </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://www.gravatar.com/avatar/7f7ca3dc5246b862f67b1ca8c02217cb?s=328&d=identicon&r=PG&f=1" data-src="https://www.gravatar.com/avatar/7f7ca3dc5246b862f67b1ca8c02217cb?s=328&d=identicon&r=PG&f=1">
      </div>
    </td>
    <td>theinlwin</td>
     <td>25</td>
     <td>KyaukTaw</td>
    <td>78955555</td>
</tr>

</tbody>

  <tfoot>
  ...

CSS

table{
  display:table;
  border:1px solid #ddd;
  table-layout:fixed;
  border-collapse: collapse;
}
th{
  color:#000;
  background-color:#f0f0f0;
  border-bottom:1px solid #ddd;
  padding:20px;
  margin:0;
  border-right:1px solid #ddd;
  
}
td{
  color:#fff;
  background-color:#000;
  border:1px solid #ddd;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  margin:0;
  width:200px;
  padding:10px;
}
tr{
  margin:0;
  padding:0;
  vertical-align:middle;
  text-align:center;
}
.photo{
  width:100px;
  height:100px;
  overflow:hidden;
  text-align:center;
}
.photo img{
  max-width:100%;
}