如何避免Bootstrap .hidden-xs行为在打印时显示所有表列？

Question

我想为基于Bootstrap编写的一些项目添加打印功能。在某些页面中，我有许多列的表。我在某些列中使用a.equals(a)来避免在移动设备上显示它们。但这导致了打印问题。 当我想在笔记本电脑上打印Chrome中的表格时，看不到.hidden-xs列！而我在Firefox上没有这样的问题。

你有什么想法解决这个问题吗？我写了下面的代码，但它没有用。

.hidden-xs

Answer 1

Chrome不会关注print媒体查询。 您可以做的是通过使用链接标记中的media属性并指定其中的所有打印样式来添加特定于打印的样式表。

<link rel="stylesheet" href="/css/print.css" media="print">

Answer 2

您只需要在媒体打印上设置更高的优先级，它也适用于Chrome，只需执行以下操作：

@media print {
    body#home .container table td,td { /* Change this with specific classes/elements on your page /*
        display: table-cell !important
    }
}

然后尝试...如果您有2个！重要，那么具有更具体定义的定义将覆盖另一个。

Answer 3

最后，我使用此代码解决了问题：

@media print {
    td.hidden-xs, th.hidden-xs {
        display: table-cell !important
    }
}