当单元格具有行跨度和列跨度时，Chrome 表格出现故障

【问题标题】：Chrome table glitch when cells have rowspan and colspan当单元格具有行跨度和列跨度时，Chrome 表格出现故障
【发布时间】：2019-12-04 20:43:47
【问题描述】：

我在使用 Google Chrome 打印包含具有 rowspan 和 colspan 属性的单元格的表格时遇到了故障。 运行如下sn -p，表格正常显示。

print();
thead{background-color:#d3d3d3}table{border-collapse:collapse;border-spacing:0}th{border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:700;text-align:center;padding:12px 12px}th:last-child{border-right:1px solid #e6e6e6}thead>tr:first-child{border-top:1px solid #e6e6e6}td{border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:400;padding:8px 12px}td:last-child{border-right:1px solid #e6e6e6}tbody>tr:nth-child(3n+1){background:#ffe1c3}tbody>tr:nth-child(3n+2){background:#fff8d8}tbody>tr:nth-child(3n+3){background:#ffffea}
<table> <thead> <tr> <th colspan="1" rowspan="2">Year</th> <th colspan="3" rowspan="1">Other</th> </tr> <tr> <th colspan="1" rowspan="1">A</th> <th colspan="1" rowspan="1">B</th> <th colspan="1" rowspan="1">C</th> </tr> </thead> <tbody> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1994</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1993</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1992</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1991</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1990</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1989</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1988</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1987</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1986</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1985</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1984</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1983</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1982</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1981</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1980</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody></table>

但如果您尝试使用Google Chrome 打印（打印预览或转换为 PDF）表格，表格会出现故障。请分别检查 Chome 和 Firefox 的以下输出：

这是一个错误吗？有办法克服吗？

【问题讨论】：

  • 您是否尝试过在数据表行上避免分页符？还是在跨行单元格上？
  • @KevinBrown 你的意思是@media print { selector { page-break-after: always; } }？如果是，那么不，因为我不知道在哪里切割桌子（可以是横向的，也可以是纵向的）。
  • 我认为您有一些 colspan 值错误。例如，检查 1986 年的条目。看来colspan 应该是2，而不是3，对吗？
  • @FonzTech 你的意思是rowspan？ colspan 仅在标题上。如果您的意思是rowspan，您可以看到将3 更改为2 会破坏表格格式。
  • 您必须打印页面（或预览其打印）才能看到 OP 质疑的错误。

标签： html css google-chrome printing html-table


【解决方案1】：

听起来确实像 chrome bug。

您是否考虑过使用 table-row-group？

thead { 
  display: table-row-group 
}

这将删除在分页符处重复的表格标题。

希望对你有帮助，干杯！

【讨论】：

    【解决方案2】：

    在自己的td 元素中包含年份会令人困惑，因为浏览器不会按预期破坏页面末尾的表格。由于年份列跨越两行，因此不会与较短的相关单元格分开。

    那么这里是您的代码所需的更改，以使表格在打印时正确中断。

    print();
    thead {
  background-color: #d3d3d3
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

th {
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 12px 12px
}

th:last-child {
  border-right: 1px solid #e6e6e6
}

thead>tr:first-child {
  border-top: 1px solid #e6e6e6
}

td {
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  font-size: 12px;
  font-weight: 400;
  padding: 8px 12px
}

td:last-child {
  border-right: 1px solid #e6e6e6
}

tbody>tr:nth-child(odd) {
  background: #fff8d8
}

tbody>tr:nth-child(odd) :first-child {
  background: #ffe1c3
}

tbody>tr:nth-child(even) {
  background: #ffffea
}
       <table>
  <thead>
    <tr>
      <th colspan="1" rowspan="2">Year</th>
      <th colspan="3" rowspan="1">Other</th>
    </tr>
    <tr>
      <th colspan="1" rowspan="1">A</th>
      <th colspan="1" rowspan="1">B</th>
      <th colspan="1" rowspan="1">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">2000</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1999</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1998</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1997</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1996</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1995</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">2000</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1999</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1998</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1997</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1996</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1995</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1994</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1993</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1992</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1991</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1990</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1989</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1988</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1987</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1986</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1985</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1984</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1983</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1982</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1981</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td rowspan="2">1980</td>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

    【讨论】：

    • 你彻底改变了桌子。如果我提供的表格格式有错误，我不会对此更改有任何问题，但由于它是有效的 html 并且 firefox 打印表格没有问题，这不能回答我的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode