Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Columns in responsive table using css

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.

like image 993
user2333363 Avatar asked Jun 10 '13 09:06

user2333363


People also ask

How do I hide a column in CSS?

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.

How do I show and hide columns in a table?

In the demo below, right-click the headers to show or hide any columns. Enjoy!

What does @media do in CSS?

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.

Can we use two media query in CSS?

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.


1 Answers

Use media queries in your css, here is the 4 breakpoints css queries.

Here is the jsfiddle http://jsfiddle.net/yeyene/MfKzU/1/

HTML

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

CSS

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;
    }    
}
like image 86
yeyene Avatar answered Oct 12 '22 23:10

yeyene