I have a generic table and Want to use this table for multi purpose. For Eg 1. For Employee details: Eno eFname ELName EDept ESalary Elocation. In the above i want to hide ELname and Elocation. Currently i used css class to hide the ELName and ELocation.
Eg 2: Student Details Sno SFname SLname SDegree SLocation. I want to hide some columns on some devices like in mobile mode, portrait mode. Currently i used css class to hide the particular column.But the table is generic for all.
I noticed that adding classes like .hidden-phone and .hidden-tablet to table cells would brdeak them visually. This is because the cells would try to display as blocks.
Can you help me what properties i need to use in .hidden-phone,.hidden-portrait..etc. Don't want to hide the columns by using tr td:nth-child(4),tr td:nth-child(3) in media queries.
To hide a column entirely from view, meaning it will not be displayed in either the normal or details row, simply use the visible column option and set it to false . This example shows a table where the first column ID is completely hidden from view using the data-visible column attribute.
In the demo below, right-click the headers to show or hide any columns. Enjoy!
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries.
Use media queries in your css, here is the 4 breakpoints css queries.
Here is the jsfiddle http://jsfiddle.net/yeyene/MfKzU/1/
<table id="myTable" width="100%" border="1">
<tr>
<td>Nothing change</th>
<td class="col_1">Hide data < 959px</td>
<td class="col_2">Hide data < 767px</td>
<td class="col_3">Hide data < 599px</td>
<td class="col_4">Hide data < 479px</td>
</tr>
<tr>
<td>Left alone</td>
<td class="col_1">aaa</td>
<td class="col_2">bbb</td>
<td class="col_3">ccc</td>
<td class="col_4">ddd</td>
</tr>
<tr>
<td>Left alone</td>
<td class="col_1">aaa</td>
<td class="col_2">bbb</td>
<td class="col_3">ccc</td>
<td class="col_4">ddd</td>
</tr>
</table>
html, body{
margin:0;
padding:0;
}
#myTable {
float:left;
border:1px solid #dfdfdf;
border-collapse:collapse;
width:100%;
font-size:12px;
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media all and (min-width: 768px) and (max-width: 959px) {
td.col_1{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 600px */
@media all and (min-width: 600px) and (max-width: 767px) {
td.col_2{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media all and (min-width: 480px) and (max-width: 599px) {
td.col_3{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media all and (max-width: 479px) {
td.col_4{
display:none;
width:0;
height:0;
opacity:0;
visibility: collapse;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With