Home » Responsive Table

Responsive Table

November 15, 2018
by W3Mind

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

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.

Give it a Share

Recent Posts

How to Exclude Specific Pages From Search Results Page in WordPress

W3Mind May 8, 2024

How to filter out shortcode content from the search result page – WordPress

W3Mind May 7, 2024

How to prevent phone number from changing from CallRail script

W3Mind May 3, 2024

How to Fix “URLs with a Permanent Redirect” Error in Semrush Audit Tool

W3Mind March 11, 2024

Black Hat SEO Penalties and Repercussions

Black Hat SEO Penalties: Avoid the Repercussions – Expert Advice

W3Mind February 28, 2024

W3Mind focuses on Blogging and provides Website Design & Development services. Here at W3Mind we also share useful and helpful articles on SEO, Business Blogging, Social Media, WordPress, internet tools and Website design & development.

ABOUT W3MIND

Hi, Welcome to W3MIND
One of the main purpose of creating a website for me is to get in touch with other people. I really enjoy building websites using content management systems like WordPress, BigCommerce, Oncord & Shopify.