Since I started off as a web designer, I had trouble creating a responsive data tables. Although I could find many solutions, I simply had 3 issues to use any of them.

  1. I wanted to use only HTML and CSS (no js in anysort).
  2. Few columns had longer descriptions for mobile screens.
  3. Create many tables in a page.

Well did I find a solution? Hell yeah!!
 

Only HTML and CSS

Simply create a table using tags, also you can apply any css to it. I'm gonna pretend they be like mine and continue.
 
 

<div class="container">
  <table class="responsive-table">
    <thead>
      <tr>
        <th>Parameter Name</th>
        <th>Description</th>
        <th>Type</th>
        <th>Mandatory / Optional</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>statusCode</td>
        <td>The status code for the entire request.</td>
        <td>String</td>
        <td>Mandatory</td>
      </tr>
      <tr>
        <td>statusDetail</td>
        <td>The status detail for the entire request.</td>
        <td>String</td>
        <td>Mandatory</td>
      </tr>
    </tbody>
  </table>
</div>

  

If you see closely, I have added 2 classes. If you had already created the table remove them from this code! Once you placed the code, you might get something like this.

table1

and then add below css code inside the style.css file (or whatever the css file that's linked to the page)!!
 
 

  @media screen and (min-width:768px){
    tr{
      text-align:left;
    }
    td{
      padding:10px 0; 
    }
  }
  @media screen and (max-width:767px){
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
      display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr{ 
      border: 1px solid #188689 ; 
      margin-top:10px;
    }

    td { 
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #ccc; 
      position: relative;
      padding-left: 50%; 
    }

    td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 10px;
      left: 12px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
      font-weight:600;
      text-align: left !important;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "Parameter Name"; }
    td:nth-of-type(2):before { content: "Description"; }
    td:nth-of-type(3):before { content: "Type"; }
    td:nth-of-type(4):before { content: "Mandatory / Optional"; }

    td {
          padding: 35px 12px 5px !important;
    }
  }

  

Well, with just with all the above codes, I did eliminate the first issue I had.
  

Few columns had longer descriptions for mobile screens.

Second issue as mentioned on the heading, I couldn't show longer sentences within the mobile screen, when I used whatever i found on Stack-Overflow.
 

mobiletable
courtesy:css-tricks.com

 
 

That's why I had to show the title on top and description below. It made sense very much! :D
 

table2

  

Create many tables in a page.

Ok I have to admit, the tricky part of this table is when you have many tables. Because, I'm using below codes to show as title for every column of a row.
  

td:nth-of-type(1):before { content: "Parameter Name"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Type"; }
td:nth-of-type(4):before { content: "Mandatory / Optional"; }

 
 

So need to be, you might have to change it for each table, by defining a class to the table. I have already added the class responsive-table. Let's imagine there is another table with 2 columns, and the class name is two-columns and the columns are "Name and Age," the above mentioned code will change to the below
 
 

.responsive-table td:nth-of-type(1):before { content: "Parameter Name"; }
.responsive-table td:nth-of-type(2):before { content: "Description"; }
.responsive-table td:nth-of-type(3):before { content: "Type"; }
.responsive-table td:nth-of-type(4):before { content: "Mandatory / Optional"; }

.two-columns td:nth-of-type(2):before { content: "Name"; }
.two-columns td:nth-of-type(2):before { content: "Age"; }

 
 
That's pretty much we need to do!! Hope you find this well, and share among the needed.