Jquery Datatable to responsive data tables

Question

I am new to data tables and never created a responsive data tables. So i may be asking much help.

Here is link for JQuery data tables editables. I want to create it resp

Answer 1

In responsive design most of the tricks done by percentage values until a certain point and after that we start using @media queries.

For your example just percentages used for the th and td tag I belive you can manage it but if it is smaller than 40em then completely different CSS take control like below;

//when width less than 40em you can also use px
@media (max-width: 40em)
{
   // show every item as a line
   .movie-list td, .movie-list th {
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   clear: left;
  }
    //for th and .titles display them as a big bold title with different background color
    .movie-list tbody th, .movie-list tbody td.title {
    display: block;
    font-size: 1.2em;
    line-height: 110%;
    padding: .5em .5em;
    background-color: #fff;
    color: #77bbff;
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }

    //for th only this is only for margin to override previous css
    .movie-list tbody th {
       margin-top: 0;
       text-align: left;
     }
}

hope this help this is just give some start;

here your fish mate :) just use developer tool bar and add the code under the h2 Live Example tag;

As far as I can tell the edit and add stuffs are working as this is completely css just you have to dig deeper.