Hide Columns in responsive table using css

Question

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.

Have you tried display:none or visiblilty:hidden; or opacity:0;?? — Nitesh
– Nitesh, Commented Jun 10, 2013 at 9:24
Use @media-queries within your css. joostrap.com/media-queries — Kees Sonnema
– Kees Sonnema, Commented Jun 10, 2013 at 9:25

user2510621 · Accepted Answer · 2013-06-28 16:13:21Z

9

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

edited Jun 28, 2013 at 16:13

user2510621

31 bronze badge

answered Jun 10, 2013 at 9:28

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2333363 Over a year ago

Can you post a JSFiddle please?

yeyene Over a year ago

Here is my jsfiddle, jsfiddle.net/yeyene/MfKzU/1 but, only table column is hidden yet.

Matt McHugh Over a year ago

Here's an updated fiddle that fixes some HTML and CSS typos that kept this from working at first. jsfiddle.net/MfKzU/74

Collectives™ on Stack Overflow

Hide Columns in responsive table using css

1 Answer 1

HTML

CSS

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related