我有一个简单的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>。更确切地说，我想在较小的屏幕上显示四个而不是七个表行。
那我怎么能这样做。