html - 应用于页眉的样式未应用于打印 View-6ren

html - 应用于页眉的样式未应用于打印 View

转载作者：行者123 更新时间：2023-11-28 00:00:40

25

4

我想用 chrome 打印一张表格。如果单行超出页面范围并为其重复表头，则不会应用表头上应用的样式。

我为该行设置了一个非常大的值，这使得它超出了一个页面并在未正确应用样式的下一页中重复标题。

引用图片:这里的背景颜色不适用于下一页标题

代码网址:https://drive.google.com/file/d/1iAKsBQ82J24r0TJaR9pMiFOtBNax7idq/view?usp=sharing

代码:

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  border: 1px solid #dddddd;
  text-align: left;
  color: red;
}
thead{
 color: red;
  background-color: blue;
}
tr:nth-child(odd) {
  background-color: #dddddd;
}
@media print{
thead{
 color: red !important;
  background-color: blue !important;
}
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma
    </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

最佳答案

是的，这是 Webkit/Chrome 的东西。它不会在每一页上打印 thead。要实现这样的目标，您可以做的是使用分页符。

分页符仅适用于 block 元素，因此您应该相应地设置 tr 的样式。

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

引用here .

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

th {
    border: 1px solid #dddddd;
    text-align: left;
    color: red;
    background-color: blue !important;
}

thead {
    color: red;
    background-color: blue !important;
}


tr:nth-child(odd) {
    background-color: #dddddd;
}
tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}
@media screen {
    tbody .head {
        display: none;
    }
    
    thead {
        color: red !important;
        background-color: blue !important;
    }
}
@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}

<h2>HTML Table</h2>

<table>
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma
    </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

关于html - 应用于页眉的样式未应用于打印 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56000641/

25

4

0

文章推荐： javascript - JQuery 步骤 - 将 "Finish"按钮重命名为其他名称

文章推荐： c++ - QCheckbox:状态多于选中和未选中

文章推荐： c++ - GLM - 四元数和旋转

文章推荐： c++ - 为什么这个 while 循环永远不会结束？

TCPDF - 仅在某些页面上有页脚/页眉
我想将页 footer 分放在文档的每一页上，除了第一页。我通过扩展 TCPPDF 类并覆盖其页脚方法来创建我的自定义页脚。然后根据文档并使用以下示例，我明白我应该使用 SetPrintHeade
html - 页眉、主要和页脚定位
我的页面分为 3 个部分。页眉主要和页脚。 header 固定在顶部，大小为 109px，边框高 6px，因此 main 到顶部的边距为 109px。我希望 main 扩展到 heade
javascript - 页眉/页脚之间的内容
我正在构建一个网站，其中每个页面都有一个 , 和一个 . 据我了解，应用程序的入口点应包括这三个组件，并且应根据用户所在的路线呈现一个或多个附加组件。我已经像这样构建了我的入口点: App.js
html - 页眉/页脚出现在错误的位置
谁能告诉我为什么Footer出现在页面顶部，而我看不到Header或LayoutDiv9？这是我添加的第二个 CSS 表，第一个是自动添加的 Fluid Grid Layout CSS 表，我根本没
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
python - 页眉/页脚终端显示
这个问题已经有答案了: Python command line interaction library? (3 个回答) 已关闭10 年前。如何创建一个包含静态页眉和页脚的 Python 脚本，如下
HTML 页眉/页脚打印功能
我正在努力为我们的 Mediboard 元素提供完整的 HTML 页眉/页脚打印功能。从长远来看，我知道 CSS3 页面媒体模块将满足我的需求，但这至少需要两三年时间。所以我试着让它与 CSS2
CSS 页眉 - 如何使用打印页边距？
我可以在每页上打印页眉，但我不熟悉打印页边距。我认为 @page css 可以工作，但它似乎不会影响页边距。如果我在正文上设置边距，它在第一页上有效，但后续页面默认从上边距开始，将页眉放在文本顶部。
header - DotNetNuke - 页眉、内容和页脚
有什么办法，就像 WordPress 一样，创建 header.php、theme-file.php 和 footer.php，然后使用钩子(Hook)将它们组合起来？对我来说仍然复制皮肤文件似乎
ios6 - UICollectionView 页眉/页脚引用大小崩溃
我正在努力解决以下问题。我有一个 UICollectionView，它的布局的页眉和页脚引用大小设置为一个值(比如 40.0)。当我删除/插入单元格并且集合 View 位于页眉和页脚不在屏幕上的位置时
javascript - 如何使用js加载网站布局(页眉，页脚)
我是 javascript 新手。我想使用 ajax 加载我的网站主模板文件(页眉、页脚、侧边栏)。我的布局文件如下所示。布局.php header(); $ret .= $app->side
css - 页眉、内容、页脚未显示图像
这是我的代码。内容图像曾短暂地工作，但现在消失了。试图让Header只出现在页面顶部，图片高度为1000px。页面底部的页脚，图像高度为 1000px。内容图像需要重复以适合内容。这是一个博客，所以
html - 页眉、正文、页脚的多个背景图像
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
css - rst2pdf 页眉/页脚文本颜色
如何更改样式表中的页眉/页脚文本颜色？我试过了，没有结果: footer: { parent: normal, alignment: TA_CENTER, textColor: red
html - 页眉 + 内容 + 带有嵌套所有内容的表单的页脚
我有以下 HTML，它有一个页眉、一个可滚动的内容和一个页脚，并且工作正常。我想添加到此 HTML 的是一个包装所有三个 div 的表单，问题是一旦我用标签包装 div，布局就会中断。有什么建议吗？
javascript - 页眉/页脚导航更新 jquery
我使用 jQuery 创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新页眉导航时遇到问题。例如，当用户单击页脚导航中的列表 1 时，我希望页眉导航也更新为相同的选择。我包含了一个 jsfi
HTML:页眉+页脚+具有特定规范的流体内容
我需要创建一个网页，其中包含正常页眉 + 粘性页脚 + 垂直拉伸(stretch)的流体内容。但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。我设法使用表格完成了此操作，但我真的
页眉/页脚问题之间的 HTML 电子邮件模板内容
我知道这可能是一件非常简单的事情，但除了很棒的 Stack Overflow 社区之外，我不知道有谁可以帮助我解决我的问题。我已经有一段时间没有在这种程度上使用 HTML/CSS 了。我正在尝试为我
css - 页眉 Logo 已偏离中心
我前段时间做了一个wordpress网站。我今天刚刚看了一眼，由于某种原因，这个标志已经向东传播了。它已经厌倦了 clearfix 的 float 、文本对齐和边距:0 自动。谁能告诉我发生了什么，或
html - 页眉/页脚/主要代码
我需要帮助创建包含#header、#footer 和#main 的div 的代码。我只是不确定它在代码中的位置。我创建了一个带有 css 样式表的简单 html 页面。我并不是要任何人为我编写代码，因

首页

博学

6Ren·AI

商城

html - 应用于页眉的样式未应用于打印 View