Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Easy Responsive Data Tables in HTML with demo

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 200
    Comment on it

    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. :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: