在< table>中插入分页符在React应用中 [英] Inserting a page break into of <table> in React app
问题描述
因此，基本上，我的表具有一堆子标题，我希望在多个子节之后插入分页符，并防止在其中一个节的中间自动分页.看起来大致如此.灰色区域是分页符位于第四个，第8个，第12个等子节之前的子标题.
So basically, my table has a bunch of sub-headers and I want a page break to be inserted after so many of these subsections and prevent an automatic page break in the middle of one of the sections. It looks this roughly. The gray areas are the sub-headers where a page break would be before if it was like the 4th, 8th, 12th, etc. subsection.
我遇到了两个主要问题，这可能是React独有的，也可能不是.另外，我正在使用Bootstrap.
There are two main issues I am running into which may or may not be unique to React. Also, I am using Bootstrap.
1)< div> 作为< table> ，&tbody> ，< thead> 问题:
1) The <div> as a child of <table>, <tbody>, <thead> issue:
我最初的想法是在每第4个< th> 之后插入< div className ='pagebreak'> .这将触发错误(解释为)为< div>.不能是< table>/< tbody>/< thead> 的子代.
My initial thinking was to just insert <div className='pagebreak'> after every 4th <th>. This will trigger the error (paraphrased) as a <div> cannot be a child of <table>/<tbody>/<thead>.
因此不允许执行以下操作:
So doing something like the following is not permitted:
let i = 1;
return _.map(section, s => {
i++;
return (
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
{ i = 4 ? <div className='pagebreak'></div> : null }
</tbody>
</table>
)
})
我有其他一些行不通的好主意是做类似的事情:
A few other bright ideas I had that didn't work was to do something like:
{ i = 4 ? <tr className='pagebreak'></tr> : null }
或者:
{ i = 4 ? <th><td className='pagebreak'></th></tr> : null }
或者:
{ i = 4 ? <tr><th><div className='pagebreak'></div></th></tr> : null }
尽管这些将绕过错误，但它们却无能为力.它将忽略 pagebreak
While these will get around there error, they don't do anything. It will ignore the pagebreak
似乎您不能在< table> 标记内放入任何分页符.
It seems like you cannot put any kind of page break inside of a <table> tag.
2)为每个小节创建一个新的< table> .
2) Creating a new <table> for every subsection.
这看起来就像是废话，因为除非我将宽度设为静态，否则列宽度将因表而异，除非我不想这样做.希望在保持所有列宽相同的同时保持动态变化，这由给定列内数据点的最大宽度确定.
It will just look like crap because column widths will vary from table to table unless I make the widths static which I don't want to do. Want to keep them dynamic while having all the columns widths be the same through out, which is determined by the max width of a data point within a given column.
话虽如此，这确实起作用，因为它实际上插入了一个分页符:
That being said, this does work in that it actually inserts a page break:
return (
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
</tbody>
</table>
<div className='pagebreak'></div>
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
</tbody>
</table>
)
关于如何处理此问题的任何建议?
Any suggestions for how to handle this?
推荐答案
这是正确的:
< div>不能是< table>或< tbody>或< thead>的子代;
但是没有什么可以阻止您对表进行标记和样式化，以便每隔一段时间您就有一行被样式化为块级元素，表示分页符，该行在CSS中声明为:
But there is nothing to stop you from marking-up and styling your table so that every so often you have a row, styled as a block level element, which represents a page-break, declared in the CSS using:
page-break-before: always;
，其中包含一个无内容的数据单元，使用:
and which contains a single content-less data-cell, using:
<td colspan="7">
您还可以使用以下方法避免常规表格行中的分页符:
You can also avoid page breaks in conventional table rows, using:
page-break-before: avoid
工作示例:
table {
border-collapse: collapse;
}
td {
height: 12px;
padding: 6px 24px;
border: 1px solid rgb(0, 0, 0);
}
tr {
page-break-before: avoid;
}
tr.page-break {
display: block;
page-break-before: always;
}
tr.page-break td {
border: 1px solid rgba(0, 0, 0, 0);
}<table>
<tr class="page-break">
<td colspan="7">
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
</tr>
<tr class="page-break">
<td colspan="7">
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
</tr>
</table>有关page-break- *属性的进一步阅读:
https://css-tricks.com/almanac/properties/p/page-break/
这篇关于在< table>中插入分页符在React应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
