How to make class responsive-table from Materialize compatible with Data Tables ?

jfabian

The first image comes from http://materializecss.com/table.html that is how class responsive-table works.

Thats what happens to datatables with the class responsive-table from Materialize. The sorting works perfect. The only problem is that thead sometimes overlap tbody or thead have diferent height from tbody as seen in the images. Also sorting icons moves. Does someone has solved this problem? Thanks for your time.

allan

It looks like they use some CSS trickery to make the table pivot like that. If the content isn't the same height as the height cells, then yes, it would misalign. That is something you would need to take up with the Materialize folks. Its a limitation in that approach unless Javascript is used to match the heights of the cells.

Allan

jfabian

It looks that javascript is used to match the heights as you say. I made a pseudo solution setting the height of cells to 40px (height of Materialize button) and taking out the padding from the tables elements ( the padding makes the incompatible with the responsive-table class from Materialize ). If someone knows or have the time to change the height of thead from the maximum height of a td elememt of the table please post the answer.
Here is the css code for compatibility with responsive-table class:

@media screen and (min-width:993px){
#data-table-simple>thead>tr>th{
padding-left:0px!important;
}
}
@media screen and (max-width:992px) and (min-width:600px){
#data-table-simple>thead>tr>th{
width:100%!important;
height:40px!important;
padding:0px!important;
}
#data-table-simple>tbody>tr>td{
width:100%!important;
height:40px!important;
padding:0px!important;
}
#data-table-simple>thead>tr{
padding:0px!important;
}
#data-table-simple>thead{
width:20%!important;
}
#data-table-simple>tbody{
width:79%!important;
}
}

@media screen and (max-width:599px){
#data-table-simple>thead>tr>th{
width:100%!important;
height:40px!important;
padding:0px!important;
}
#data-table-simple>tbody>tr>td{
width:100%!important;
height:40px!important;
padding:0px!important;
}
#data-table-simple>thead>tr{
padding:0px!important;
}
#data-table-simple>thead{
width:30%!important;
}
#data-table-simple>tbody{
width:69%!important;
}
}