Не могу разбить страницу на работу, не испортив форматирование таблицы

Question

У меня были проблемы с разрывами страниц в таблицах. Думаю, у меня было решение, так как оно работало нормально в этом вопросе:

Вставка разрыва страницы в

Это нормально работало для таблицы с одним столбцом, но теперь, когда я работаю с несколькими столбцами, это беспорядок.

По сути, я должен включить display: block, чтобы разрыв страницы работал должным образом, но это позволяет перейти от хорошо отформатированной таблицы к следующему:

Я опустил список в MDN, просто пытаясь что-нибудь, что могло бы работать.

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Кроме того, разрывы страниц работают только в том случае, если они по отдельности <tr>, что нежелательно, поскольку генерирует пустую страницу. Разобрались, переместив pagebreak в <tr>. из <td>.

Мне не удалось решить эти проблемы; какие-либо предложения о том, как подойти к этой проблеме?

Не уверен, насколько полезной будет проблема печати JSFiddle, но вот скомпилированный HTML. Я никогда не смогу заставить JSFiddle работать с React:

https://jsfiddle.net/5gz62d91/

Лучше всего будет репозиторий Github:

https://github.com/ishraqiyun77/page-breaks

Вот код отдельно:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import styles from '../assets/scss/app.scss';

class PageBreakIssues extends Component {

    // Render the data points
    renderDataPoint() {
        let dataPoint = [];
        for (let i = 1; i <= 3; i++) {
            let num = (Math.random() * 100).toFixed(2);
            dataPoint.push(
                <td className='data-point' key={ i }>
                    { num < 25 ? null : num }
                </td>
            )
        }
        return dataPoint;
    }

    // Start generating the row data
    renderDataRow() {
        let dataRow = [];
        for (let i = 1; i <= 5; i++) {
            dataRow.push(
                <tr key={ i }>
                    <td className='data-name' colSpan='3' key={i}>Test - { i }</td>
                    { this.renderDataPoint() }
                </tr>
            )
        }
        return dataRow;
    }

    // Start generating table sections with the section name
    // COMMENT THIS OUT TO TRY WITOUT ADDING A BLANK ROW
    renderSections() {
        let sections = [];
        for (let i = 1; i <= 10; i++) {
            sections.push(
                <tbody key={ i }>

                    <tr key={ i }>
                        <td colSpan='7' className='section-name' key={i} >
                            Section - { i }
                        </td>
                    </tr>
                    { this.renderDataRow() }
                    {
                        i % 2 === 0
                            ?
                            <tr className='pagebreak'>
                                <td colSpan='7'></td>
                            </tr>
                            :
                            null
                    }
                </tbody>
            )
        }   
        return sections;
    }

    // Start generating table sections with the section name
    // UNCOMMENT THIS SECTION TO TRY WITHOUT INSERT BLANK TR
    // renderSections() {
    //     let sections = [];
    //     for (let i = 1; i <= 10; i++) {
    //         sections.push(
    //             <tbody key={i}>
    //                 <tr key={i}>
    //                     <td colSpan='7' className={ i % 2 === 0? 'section-name pagebreak' : 'section-name'} key={i} >
    //                         Section - {i}
    //                     </td>
    //                 </tr>
    //                 {this.renderDataRow()}
    //             </tbody>
    //         )
    //     }
    //     return sections;
    // }

    // Render the table with <th>
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th colSpan='3'>Results</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                    </tr>
                </thead>
                { this.renderSections() }
            </table>
        )
    }
}

ReactDOM.render(<PageBreakIssues />, document.getElementById('app'));

---

@mixin borders {
    border: 1px solid black;
}

%borders {
    @include borders;
}

table {
    border-spacing: 0;

    th {
        text-align: center;
    }

    tr {
        th{
            @extend %borders;
        }

        td {
            @extend %borders;
            &.data-name {
                padding: 3px 100px 3px 3px;
            }

            &.data-point {
                text-align: center;
                padding: 3px 10px;
            }

            &.section-name {
                background-color: #999;
            }
        }
    }
}

@media print {
    tr {
        display: block;
    }

    .pagebreak {
        break-before: always !important;
        page-break-before: always !important;
        page-break-inside: avoid !important;
    }
}

Answer 1

Я придумываю еще более жесткий метод кодирования (так что call отлично решит вашу проблему).Я должен сказать, что это не элегантно.

Основная идея моего метода - изменить tbody на display:block (как обычно), но добавить .pagebreak к цели tbody.

Однако этот метод отсоединяет tbody от таблицы и, таким образом, больше не выравнивается с thead.Вот почему я добавляю tr для печати thead и удаляю начало thead при печати. ​​

Добавлена ​​печать th, не показывается в обычном режиме

//Thead part, add a printing thead only shown in Print
//As originaly thead will has alloction problem
{ i % 2 === 1 ?
  <tr className='printing-thead'>
    <td colspan="3">Results</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr> : null
}
....
...
//Corrected Page break
</tbody>
<tbody class="pagebreak">
    <tr>
        <td colspan="7"></td>
    </tr>
</tbody>
<tbody>
...

Соответствующий CSS

table {
  border-spacing: 0;
  table-layout: fixed;
  th {
    text-align: center;
  }
  tr {
    th {
      @extend %borders;
    }
    td {
      @extend %borders;
      &.data-name {
        padding: 3px 100px 3px 3px;
      }
      &.data-point {
        text-align: center;
        padding: 3px 10px;
      }
      &.section-name {
        background-color: #999;
      }
    }
  }
  tr.printing-thead {
    display: none;
  }
}

@media print {
  thead {
    display: none;
  }
  tbody {
    display: block;
    tr.printing-thead {
      display: contents;
      font-weight: bold;
      text-align: center;
    }
  }
  .pagebreak {
    height: 0px;
    break-before: always !important;
    page-break-before: always !important;
    page-break-inside: avoid !important;
    td {
      display: none;
    }
  }
}

JSfiddle .

И реагирующая версия

JSfiddleРеактивная версия