In this post, you will learn an easy way to show tables in responsive design. We will use css media queries for responsive designs in data tables. By using this we can find out the screen where we want to change css for table. Below css code is used to make table view easy for responsive screens.

CSS:
 

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    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 #ccc; }
    
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    td:nth-of-type(1):before { content: data1; }
    td:nth-of-type(2):before { content: data2; }
    td:nth-of-type(3):before { content: data3; }
    }

The css we will use is from the screen 760px for responsive table. We will set every table element as a block element by using css. Then it will look like each row of the table is a table itself. For each cell in the table we will use css property content(:before) given to each label.

You can check the below html file to see the example. 

Hope this will help in responsive table design. :)