Responsive table column widths in pixels

Question

I have an html table (width 100%) in which each column has a specified width e.g. style="width: 240px". I cannot convert these widths to %. Is there a clever/efficient way to resize the columns (make them responsive) when the table size changes?

Answer 1

You can use media queries to achieve this. Like this.

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
        width: 30%; /* mobile device with have 70% reduction of width */
    }

}

Or you can directly use css like following to set any width or style.

table {
 width:100%;
}

You can also define a class ( lets say mobile_not_show) for tr ,that does not require to be visible in mobile . Then in above media query just set .mobile_not_show {display:none;}.So this will make those specific tr hidden in mobile only. SOURCE - http://css-tricks.com/responsive-data-tables/