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!
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/
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>