Jquery 引导表媒体查询

我有一个简单的引导表，我正在尝试使用隐藏列技术编写媒体查询，以

显示：无

或

可见性：隐藏

最后两个

…

矿井表：

<div id="table">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-3">

                      <table class="table table-condensed" width="647">
                          <thead>
                              <tr>
                                  <th>Membership Plan</th>
                                  <th>Table heading</th>
                                  <th>Table heading</th>
                                  <th>Table heading</th>
                                  <th>Table heading</th>
                                  <th>Table heading</th>
                                  <th>Table heading</th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>
                              <tr>
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>
                              <tr>
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>
                              <tr>
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>
                              <tr class="none">
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>
                              <tr class="none">
                                  <td>Membership Plan</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                                  <td>Table cell</td>
                              </tr>

                          </tbody>
                      </table>
                  </div>

          </div>
        </div>        
      </div>

这是我的表格示例

问题是在

@media（最大宽度：480px）

上，我的整个表都被隐藏了，我只想隐藏最后两个

…

。更准确地说，我想在更小的屏幕上显示四行而不是七行。

---

所以我该怎么做呢。

它只隐藏最后两行，而不是整个表。对我来说，它在Chrome上工作。下降到4行

Media Query Section ================================*/

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) { 
    table.table tr.none {
        display: none;
    }

}

/*====================================================*/