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
}
Example:
| First Name | Last Name | Gender | Phone | |
|---|---|---|---|---|
| John | Cena | Male | 123-456-7890 | abc123@gmail.com |
| John | Cena | Male | 123-456-7890 | abc123@gmail.com |
| John | Cena | Male | 123-456-7890 | abc123@gmail.com |
| John | Cena | Male | 123-456-7890 | abc123@gmail.com |
