JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="//code.jquery.com/jquery-2.1.4.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="image" data-src="image">
      </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="image" data-src="image">
      </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="image" data-src="image">
      </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="image" data-src="image">
      </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="image" data-src="image">
      </div>
    </td>
    <td>theinlwin</td>
     <td>25</td>
     <td>KyaukTaw</td>
    <td>78955555</td>
</tr>
</tbody>

<tfoot>
  <tr>
    <td>id</td>
    <td>image</td>
    <td>name</td>
    <td>age</td>
    <td>address</td>
    <td>phone</td>
  </tr>
</tfoot>

</table>

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:10px;
  margin:0;
}
td{
  color:#fff;
  background-color:#000;
  border:1px solid #ddd;
  margin:0;
  width:200px;
}
tr{
  margin:0;
  padding:0;
}
.photo{
  width:100px;
  height:100px;
  text-align:center;
}
.photo img{
  max-width:100%;
}