Html 使用 Bootstrap 3 如何隐藏表格中的列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18362893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Bootstrap 3 how can I hide columns in my table?
提问by daveomcd
I'm trying to hide columns for my responsive design when in col-xsand col-sm. I first attempted to use hidden-xs/hidden-smclasses, but this didn't work. I also tried using visible-desktopas mentioned here: Twitter Bootstrap Responsive - Show Table Column only on Desktop
我试图在col-xs和时隐藏响应式设计的列col-sm。我首先尝试使用hidden-xs/hidden-sm类，但这不起作用。我也尝试使用visible-desktop这里提到的：Twitter Bootstrap Responsive - Show Table Column only on Desktop
That also didn't work. What is the best way to do this? I rather not make two separate tables and then hide one or the other.
那也没有用。做这个的最好方式是什么？我宁愿不制作两个单独的表格，然后隐藏其中一个。
Code I tried that's not currently working:
我试过的代码目前不起作用：
<table>
<thead>
<th>Show All the time</th>
<th class="hidden-xs hidden-sm">Hide in XS and SM</th>
</thead>
<tbody>
<tr>
<td>Show All the time</td>
<td class="hidden-xs hidden-sm">Hide in XS and SM</td>
</tr>
</tbody>
</table>
采纳答案by Ross Allen
The code should work just fine. Bootstrap supports hiding/showing thand tdwith its responsive utility classes https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:
代码应该可以正常工作。引导支持隐藏/显示th和td其响应的实用工具类https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504：
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
tr& { display: none !important; }
th&,
td& { display: none !important; }
}
The code works in this jsFiddle: http://jsfiddle.net/A4fQP/
代码在这个 jsFiddle 中工作：http: //jsfiddle.net/A4fQP/
回答by Ogglas
It seems hidden-xs/hidden-smhas worked before since the accepted answer has many up votes, however the fiddle example does not work for me when I'm resizing the area. What works for me though is opposite logic using visible-md/visible-lg. I can't understand why because according to documentation Bootstrap should still support hidden-xs/hidden-sm.
hidden-xs/hidden-sm由于接受的答案有很多投票，它似乎以前有效，但是当我调整区域大小时，小提琴示例对我不起作用。对我有用的是相反的逻辑，使用visible-md/visible-lg. 我不明白为什么，因为根据文档 Bootstrap 应该仍然支持hidden-xs/hidden-sm。
Working fiddle: http://jsfiddle.net/h1ep8b4f/
工作小提琴：http: //jsfiddle.net/h1ep8b4f/
<table>
<thead>
<th>Show All the time</th>
<th class="visible-md visible-lg">Hide in XS and SM</th>
</thead>
<tbody>
<tr>
<td>Show All the time</td>
<td class="visible-md visible-lg">Hide in XS and SM</td>
</tr>
</tbody>
</table>
回答by ffej
I recently run into a similar issue, working on displaying a table differently, depending on screen size. The task for me was to hide one column when on a bigger screen and show it on a mobile device while hiding three other columns (the 'one' column is the sum of data in the 'three' columns. Like the response above, I used a media query, but disposed of bootstrap's pre-made views altogether. I added classes to the thand tdtags involved.
我最近遇到了类似的问题，根据屏幕大小不同地显示表格。我的任务是在更大的屏幕上隐藏一列并在移动设备上显示它，同时隐藏其他三列（“一”列是“三”列中数据的总和。就像上面的响应一样，我使用媒体查询，但完全丢弃了引导程序的预制视图。我向所涉及的th和td标签添加了类。
Looks very much like this:
看起来非常像这样：
.full_view {
width: 50px;
@media(max-width: 768px){
display: none;
}
}
.small_view {
width: 50px;
@media(min-width: 768px){
display: none;
}
}
