分页符不适用于tbody问题

我生成使用打印报告table在Twitter的引导布局.

我tbody内心有多个table;

虽然page-break-after每个都需要印刷tbody

所以我已经应用了print-css

@media print {
    tbody{
        page-break-after: auto;
        page-break-inside: avoid;
        border: none !important;
        margin-bottom: 20px !important;
    }
}

问题

在应用样式page-break-after时tbody,分页功能无法正常工作,请参阅此处

但是当应用display:block到tbody给我想要的结果,但表的布局正在发生变化后扭曲tbody display:table-row-group,以display:block 看到这里

我想在tbody使用后打破页面page-break-after: auto;.

情景如下

这是一个已知问题.page-break属性仅适用于块级元素.

这就是为什么你没有获得分页符的原因tbody.当你明确地改变tbody其 display: table-row-group到display: block,那么页游将开始应用.但是,这将打破你的表的布局.

根据规格:http://www.w3.org/TR/CSS21/page.html#page-break-props

用户代理必须将这些属性应用于根元素的正常流中的块级元素.用户代理还可以将这些属性应用于其他元素,例如"表格行"元素

虽然规范说用户代理也可以应用这些属性table-row,但" 可能 " 一词扮演其角色,并且不同实现的行为不一致.

解:

将分页符应用于您的块级伪元素,tbody而不是直接应用它tbody.

像这样:

tbody::after {
    content: ''; display: block;
    page-break-after: always;
    page-break-inside: avoid;
    page-break-before: avoid;        
}

这是你的工作小提琴:http://jsfiddle.net/abhitalks/DTcHh/3054/

另外,请注意,仅此一项并不能解决您的所有问题.您必须仔细定义页面上下文以及适合您的用例的边距和尺寸.

这将为您提供一个开始:

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    ...
}

这是一个片段,有一个非常简单的例子来试用它.要进行测试,请检查打印预览,应该有两个分页符,每个分页符后面一个tbody.

片段:

table, th, td { border: 1px solid gray; border-collapse: collapse; }
th, td { padding: 8px; }
tbody:first-of-type { background-color: #eee; }

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    tbody::after {
        content: ''; display: block;
        page-break-after: always;
        page-break-inside: avoid;
        page-break-before: avoid;        
    }
    
  
}

 
    Print



    

		

			
Head 1
			
Head 2
			
Head 3
		
    
	

		

			
Row 1 Cell 1
			
Row 1 Cell 2
			
Row 1 Cell 3
		
		

			
Row 2 Cell 1
			
Row 2 Cell 2
			
Row 2 Cell 3
		
	
	

		

			
Row 3 Cell 1
			
Row 3 Cell 2
			
Row 3 Cell 3
		
		

			
Row 4 Cell 1
			
Row 4 Cell 2
			
Row 4 Cell 3
		
	
    

		

			
Foot 1
			
Foot 2
			
Foot 3