如何在使用CSS媒体样式时完全取消课程？

时间：2014-07-16 13:25:01

标签： css css3 twitter-bootstrap

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

Normal Table

它使用标准表结构构建：

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

当页面小于某个宽度时，它会折叠成如下所示：

Bad Table - Collapsed

使用此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类并使用较小的屏幕时，折叠表会显示我希望它看起来如何：

Good Table - Collapsed

我的问题似乎是这块CSS：

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

表明问题的小提琴： http://jsfiddle.net/38vXF/

JSFiddle工作（和非垂直标题） http://jsfiddle.net/zzUqL/1/

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

当页面较小且媒体CSS渲染我的表格时，如何完全删除此CSS类（table-header-rotated）？此时，显然，我不需要垂直标题。

3 个答案:

答案 0 :(得分：2)

您只需使用matchMedia即可使用javascript动态删除该类。 像这样：

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

答案 1 :(得分：2)

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

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

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

};

答案 2 :(得分：0)

我更新了JS Fiddle

无需删除“table-header-rotating”类。

您可以使用此类，但您只需重置其样式，如下面在媒体查询中所述。

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

根据您的新要求，我仅更改了CSS中的代码，并参考了您的{​​{3}}

这也可以使用JS实现，但由于跨浏览器和不同的移动设备，最好使用CSS更改。

请参阅此comment

下面我添加了CSS样式代码。

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

如果您有任何其他查询或评论，则可以修改小提琴并重新发送。

问候D.

相关问题
最新问题