Clever Geek Handbook

Column widths of columns in pixels

I have a html table (100% width) where each column has a specified width, eg. style = "width: 240px". I cannot convert these widths to%. Is there a smart / efficient way to resize columns (make them responsive) when the table is resized? Thank!

+3


source to share


2 answers


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 below to set any width or style.



table {
 width:100%;
}

You can also define a class (for example mobile_not_show

) for tr

that doesn't require mobile visibility. Then in the above media

query, just install .mobile_not_show {display:none;}

. Thus, these specials tr

will only be hidden on mobile devices. SOURCE - http://css-tricks.com/responsive-data-tables/

+1


source


Use% for the first line



table th {
  width: 25%;
}
<table style="width:100%">
  <tr>
    <th>Jill</td>
    <th>Smith</td> 
    <th>50</td>
    <th>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>94</td>
  </tr>
</table>
0


source






More articles:


All Articles