W3 Mind Logo
Home » Responsive Table

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
}
				
			

Example:

First Name Last Name Gender Phone Email
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
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!