css - 使用CSS媒体样式时如何完全取消类？

Question

我有一个看起来像这样的表:

它是使用标准表结构构建的:

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

table-header-rotated 看起来像这样获取垂直列标题

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

当页面小于一定宽度时，它会折叠成这样:

这是使用这个 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; 
    }
}

现在，我的问题是，当我从我的表格中删除 table-header-rotated 类并使用较小的屏幕时，折叠的表格看起来像我想要的样子:

我的问题似乎是这个 CSS block :

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

演示问题的 fiddle : http://jsfiddle.net/38vXF/

它工作的 JSFiddle(和非垂直标题) http://jsfiddle.net/zzUqL/1/

请记住，对于两个 fiddle ，表格布局会根据窗口的大小而变化。

当页面较小并且媒体 CSS 正在呈现我的表格时，我如何才能完全删除此 CSS 类 (table-header-rotated)？此时，显然，我不需要垂直标题。

Answer 1

这可以通过在加载时动态添加/删除类以及使用 Javascript/jQuery 调整屏幕大小时来实现。下面的示例使用 jQuery，但如果您不想使用 jQuery，可以将它移植回原始 JavaScript。

注意: JS/jQuery 宽度和 CSS 媒体查询宽度之间存在差异，如 this post 中所述.因此，我们还必须使用此处提供的解决方法。

Updated Demo

宽度变通代码:

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

示例 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');
    });
});

示例 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';
        }
    };

};