使用 Bootstrap 3 如何隐藏表格中的列？

Posted 2023-03-05

【中文标题】使用 Bootstrap 3 如何隐藏表格中的列？

【英文标题】：Using Bootstrap 3 how can I hide columns in my table?

【发布时间】：2013-08-24 03:32:42

【问题描述】：

我试图在col-xs 和col-sm 中隐藏我的响应式设计的列。我第一次尝试使用hidden-xs/hidden-sm 类，但这不起作用。我还尝试使用visible-desktop，如此处所述：Twitter Bootstrap Responsive - Show Table Column only on Desktop

那也没用。做这个的最好方式是什么？我宁愿不制作两个单独的表格，然后隐藏其中一个。

我尝试过的代码目前不起作用：

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

【问题讨论】：

看起来在您包含的帖子中，使用了hidden-phone hidden-tablet 而不是visible-desktop。你试过吗？

我也试过这两种方法，但仍然没有影响我的桌子。也许我做错了？ <th class='hidden-phone'> & <td class='hidden-tablet'>.

引导程序 3？ hidden-xs/hidden-sm 应该可以工作。您可以发布您尝试过的代码吗？

@Skelly，我认为从这个页面他们不允许在 3 中这样做......github.com/twbs/bootstrap/pull/3140

@Skelly，这是一个 jsfiddle 示例：jsfiddle.net/MgcDU

【参考方案1】：

似乎hidden-xs/hidden-sm 以前工作过，因为接受的答案有很多赞成票，但是当我调整区域大小时，小提琴示例对我不起作用。对我有用的是使用visible-md/visible-lg 的相反逻辑。我不明白为什么，因为根据文档 Bootstrap 应该仍然支持hidden-xs/hidden-sm。

工作小提琴：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>

【讨论】：

这很令人困惑，但在尝试了一段时间后它确实有效

【参考方案2】：

代码应该可以正常工作。 Bootstrap 支持隐藏/显示 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; 

代码在这个 jsFiddle 中工作：http://jsfiddle.net/A4fQP/

【讨论】：

Bootstrap 3.2.0 似乎弃用了这种方法：“类 .visible-xs、.visible-sm、.visible-md 和 .visible-lg 也存在，但 是自 v3.2.0 起已弃用。它们大致相当于 .visible-*-block，除了用于切换 相关元素的其他特殊情况。”这意味着没有官方方法可以切换表列的可见性。你知道这是不是真的吗？ @MarkE.Haase 我认为这个解决方案可能会回答您的问题 - ***.com/a/48295538/3761310@DukeSilver 问题指的是 Bootstrap 3，您的链接指的是 bootstrap 4

【参考方案3】：

我最近遇到了一个类似的问题，我正在根据屏幕大小以不同的方式显示表格。我的任务是在更大的屏幕上隐藏一列并在移动设备上显示它同时隐藏其他三列（“一”列是“三”列中数据的总和。就像上面的响应一样，我使用了媒体查询，但完全丢弃了引导程序的预制视图。我在所涉及的th 和td 标签中添加了类。

看起来很像这样：

.full_view 
width: 50px;
  @media(max-width: 768px)
    display: none;
  


.small_view 
  width: 50px;
  @media(min-width: 768px)
    display: none;