How can I completely cancel a class when a CSS media style is used?

Question

I have a table that looks like this:

Normal Table

It is built using a standard table structure:

<table id="dashboard" class="table table-condensed table-hover table-striped table-bordered sortableTable responsive-table table-header-rotated">
   <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Date Field</th>
            <th class="rotate"><div><span>Attribute 1</span></div></th>
            <th class="rotate"><div><span>Attribute 2</span></div></th>
            <th class="rotate"><div><span>Attribute 3</span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Col 1">Data 1</td>
            <td data-label="Col 2">Data 2</td>
            <td data-label="Date Field" class="success">2014-07-03</td>
            <td data-label="Attribute 1" class="success"><a href="#">&nbsp;</a></td>
            <td data-label="Attribute 2" class="success"><a href="#">&nbsp;</a></td>
            <td data-label="Attribute 3" class="success"><a href="#">&nbsp;</a></td>
        </tr>
        <tr>
            <td data-label="Col 1">Data 3</td>
            <td data-label="Col 2">Data 4</td>
            <td data-label="Date Field" class="warning">2014-06-03</td>
            <td data-label="Attribute 1" class="success"><a href="#">&nbsp;</a></td>
            <td data-label="Attribute 2" class="warning"><a href="#">&nbsp;</a></td>
            <td data-label="Attribute 3" class="success"><a href="#">&nbsp;</a></td>
        </tr>
    </tbody>
</table>

And the table-header-rotated looks like this to get the vertical column headers

.table-header-rotated th.row-header{
  width: auto;
}

.table-header-rotated td{
  width: 10px;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate{
  height: 80px;
  width: 10px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  line-height: 0.8;
}

.table-header-rotated th.rotate > div{
  position: relative;
  top: 0px;
  height: 100%;
  -ms-transform:skew(0deg,0deg);
  -moz-transform:skew(0deg,0deg);
  -webkit-transform:skew(0deg,0deg);
  -o-transform:skew(0deg,0deg);
  transform:skew(0deg,0deg);
  overflow: hidden;
}

.table-header-rotated th.rotate span {
  -ms-transform:skew(0deg,0deg) rotate(270deg);
  -moz-transform:skew(0deg,0deg) rotate(270deg);
  -webkit-transform:skew(0deg,0deg) rotate(270deg);
  -o-transform:skew(0deg,0deg) rotate(270deg);
  transform:skew(0deg,0deg) rotate(270deg);
  position: absolute;
  bottom: 30px; 
  left: -20px;
  display: inline-block;
  text-align: left;
  text-align: center; 
}

When the page is less than a certain width, it collapses to look like this:

Bad Table - Collapsed

This is done using this CSS:

@media 
only screen and (max-width: 900px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    #dashboard table, 
    #dashboard thead, 
    #dashboard tbody, 
    #dashboard th, 
    #dashboard td, 
    #dashboard tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #dashboard thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #dashboard tr { border: 1px solid #ccc; }

    #dashboard td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        vertical-align: left;
        text-align: left;
    }

    #dashboard td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Pull label from the data-label attribute */
        content: attr(data-label);
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body { 
        padding: 0; 
        margin: 0; 
        width: 320px; }
    }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body { 
        width: 495px; 
    }
}

Now, my problem is, when I remove the table-header-rotated class from my table, and use a smaller screen, the collapsed table looks how I want it to look:

Good Table - Collapsed

My problem appears to be this block of CSS:

.table-header-rotated td{
  width: 10px;
  vertical-align: middle;
  text-align: center;
}

A fiddle demonstrating the problem: http://jsfiddle.net/38vXF/

JSFiddle of it working (and non vertical headers) http://jsfiddle.net/zzUqL/1/

Remeber, for both fiddles, the table layout changes based on the size of the window.

How can I completely remove this CSS class (table-header-rotated) when the page is smaller and the media CSS is rendering my table? At that point, obviously, I don't need the vertical headers.

Why not just wrap that CSS in a min-width media query? Like `@media only screen and (min-width: 900px) {...}` — DavidG, Jul 16 '14 at 13:31
Since you haven't tagged JS/jQuery, I know you probably are not looking for a solution using that. But if in case you decide to go that way, you can use the code in this [fiddle](http://jsfiddle.net/38vXF/1/). — Harry, Jul 16 '14 at 13:44

Romain · Answer 1 · 2014-07-16T14:02:52.313

2

You can simply use matchMedia to remove dynamicaly the class using javascript. Like this:

if (matchMedia) {
    var mq = window.matchMedia("(min-width: 900px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
function WidthChange(mq) {

    if (mq.matches) {
        document.querySelector("table").classList.add("table-header-rotated");
    }
    else {
        document.querySelector("table").classList.remove("table-header-rotated");
    }
}

edited Jul 16 '14 at 14:02

answered Jul 16 '14 at 13:45

Romain

103
7

+1 for a very nice option. But do you know about the browser support for this `matchMedia`? – Harry Jul 16 '14 at 14:24
1

It work very well from IE10. But it exist a very nice polyfill from Paul Irish [here](https://github.com/paulirish/matchMedia.js/) for older browser. – Romain Jul 16 '14 at 14:56

score 2 · Accepted Answer · edited May 23 '17 at 12:19

This can be achieved by dynamically adding/removing the class on loading and also while resizing the screen using Javascript/jQuery. The below sample uses jQuery but it can be ported back to vanilla JavaScript if you prefer not to use jQuery.

Note: There is a difference between JS/jQuery width and CSS media queries width as mentioned in this post. Hence we would also have to use the work-around provided there.

Updated Demo

Width workaround code:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

Sample 1 - jQuery:

$(document).ready(function () {
    res = viewport();
    if (res.width<900) $('#dashboard').removeClass('table-header-rotated');
    $(window).on('resize', function () {
        res = viewport();
        console.log(res.width);
        if (res.width < 900) $('#dashboard').removeClass('table-header-rotated');
        else $('#dashboard').addClass('table-header-rotated');
    });
});

Sample 2 - JavaScript:

window.onload = function (){
    res = viewport();
    if (res.width<900) {
        var elm = document.getElementById('dashboard');
        elm.className = elm.className.replace('table-header-rotated','');
    }
    window.onresize = function(){
        elm = document.getElementById('dashboard');
        res = viewport();
        if (res.width<900) {
            elm.className = elm.className.replace('table-header-rotated','');
        }
        else{
            if(elm.className.indexOf('table-header-rotated') == -1)
                elm.className += ' table-header-rotated';
        }
    };

};

score 0 · Answer 3 · edited May 23 '17 at 12:30

I have updated the JS Fiddle

There is no need to remove the class "table-header-rotated".

You can use this class, but you just need to reset it's styling, as below mentioned in media queries.

@media only screen and (max-width: 900px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .table-header-rotated td {
        width: auto;
    }
}

With your new requirements, I have changed the code in CSS only, with reference to your comment

This can also be achieved using JS, but its preferable to use CSS changes due to cross browser and different mobile devices.

Please refer to this JS Fiddle Updated

Below I have added the CSS style code.

    .table-header-rotated th.row-header{
      width: auto;
    }

    .table-header-rotated td{
      width: 10px;
      vertical-align: middle;
      text-align: center;
    }
@media 
    only screen and (min-width: 901px) {


    .table-header-rotated th.rotate{
      height: 80px;
      width: 10px;
      position: relative;
      vertical-align: bottom;
      padding: 0;
      font-size: 12px;
      line-height: 0.8;
    }

    .table-header-rotated th.rotate > div{
      position: relative;
      top: 0px;
      height: 100%;
      -ms-transform:skew(0deg,0deg);
      -moz-transform:skew(0deg,0deg);
      -webkit-transform:skew(0deg,0deg);
      -o-transform:skew(0deg,0deg);
      transform:skew(0deg,0deg);
      overflow: hidden;
    }

    .table-header-rotated th.rotate span {
      -ms-transform:skew(0deg,0deg) rotate(270deg);
      -moz-transform:skew(0deg,0deg) rotate(270deg);
      -webkit-transform:skew(0deg,0deg) rotate(270deg);
      -o-transform:skew(0deg,0deg) rotate(270deg);
      transform:skew(0deg,0deg) rotate(270deg);
      position: absolute;
      bottom: 30px; 
      left: -20px;
      display: inline-block;
      text-align: left;
      text-align: center; 
    }
}


@media 
    only screen and (max-width: 900px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
/*
        #dashboard table, 
        #dashboard thead, 
        #dashboard tbody, 
        #dashboard th, 
        #dashboard td, 
        #dashboard tr { 
            display: block; 
        }
*/
        /* Hide table headers (but not display: none;, for accessibility) */
/*      #dashboard thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
    */  
        #dashboard tr { border: 1px solid #ccc; }

        #dashboard td { 
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            /*padding-left: 50%;*/ 
            vertical-align: left;
            text-align: left;
        }

        #dashboard td:before { 
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%; 
            padding-right: 10px; 
            white-space: nowrap;
            /* Pull label from the data-label attribute */
            /*content: attr(data-label);*/
        }
    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body { 
            padding: 0; 
            margin: 0; 
            width: 320px; }
        }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body { 
            width: 495px; 
        }
    }

If you have any other query or comment, then you can modify the fiddle and resend it again.

Regards D.

Nope, if you add `table-header-rotated` to the table, it still ends up with the same problem. It is not just one property that we have to reset to initial. There are multiple class and properties. OP needs the class `table-header-rotated` for the table but just want to nullify its effect at smaller resolutions. — Harry, Jul 16 '14 at 13:38
Can you please explain what should be the output! Because, as seen from the screenshot that you added in the result, this code achieves it perfectly, in the small and medium screen. — DevangKantharia, Jul 16 '14 at 13:41
Hi, Can you please use the [jsfiddle collabration](http://jsfiddle.net/devangkantharia/yb8KH/#&togetherjs=6QdrhAarKG) and show me what you want to achieve...!! — DevangKantharia, Jul 16 '14 at 13:47
Very simply, I want the large screen version of [this](http://jsfiddle.net/38vXF/) (notice the headers) and the small screen version of [this](http://jsfiddle.net/zzUqL/1/) — Andy, Jul 16 '14 at 13:53
Hi Andy, I hope this is what you want!! Please check this [JS Fiddle](http://jsfiddle.net/devangkantharia/KpCCf/1/)... Regards D. — DevangKantharia, Jul 16 '14 at 14:17

How can I completely cancel a class when a CSS media style is used?

3 Answers3