当单元格具有行跨度和列跨度时，Chrome 表格出现故障
Posted
技术标签:
【中文标题】当单元格具有行跨度和列跨度时，Chrome 表格出现故障【英文标题】：Chrome table glitch when cells have rowspan and colspan 【发布时间】：2019-12-04 20:43:47 【问题描述】：我在使用 Google Chrome 打印包含具有 rowspan 和 colspan 属性的单元格的表格时遇到了故障。
运行如下sn -p，表格正常显示。
print();theadbackground-color:#d3d3d3tableborder-collapse:collapse;border-spacing:0thborder-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:700;text-align:center;padding:12px 12pxth:last-childborder-right:1px solid #e6e6e6thead>tr:first-childborder-top:1px solid #e6e6e6tdborder-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:400;padding:8px 12pxtd:last-childborder-right:1px solid #e6e6e6tbody>tr:nth-child(3n+1)background:#ffe1c3tbody>tr:nth-child(3n+2)background:#fff8d8tbody>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 质疑的错误。
【参考方案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 打印表格没有问题，这不能回答我的问题。以上是关于当单元格具有行跨度和列跨度时，Chrome 表格出现故障的主要内容，如果未能解决你的问题，请参考以下文章