引导表媒体查询

Question

我有一个简单的Bootstrap表，我试图使用隐藏列技术将媒体查询转发到display:none或visibility:hidden最后两个<tr class="none">...</tr>。

矿井表：

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

}

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

这是我的Bootstrap表示例。

问题在于@media (max-width: 480px)我整个表都隐藏了，我只想隐藏最后两个<tr class="none">....</tr>。更确切地说，我想在较小的屏幕上显示四个而不是七个表行。 那我怎么能这样做。