Responsive Table

Hello Folks,
You can make the HTML table responsive with some CSS tricks. See the below example and try it.


<div class="responsive-table">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th><b>First Name</b></th>
      <th><b>Last Name</b></th>
      <th><b>Gender</b></th>
      <th><b>Phone</b></th>
      <th><b>Email</b></th>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
  </table>
</div>


.responsive-table{
    width: 100%;
    overflow-y:hidden
}

First NameLast NameGenderPhoneEmail
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com