首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在不弄乱表格格式的情况下无法分页

作者：卸妆乳123 | 来源：互联网 | 2022-12-06 17:40
如何解决《在不弄乱表格格式的情况下无法分页》经验，为你挑选了1个好方法。

我一直遇到表格中的分页问题.以为我有一个解决方案,因为它在这个SO问题中工作得很好:

在React app中的

中插入分页符

这对于有一列的表来说很好,但是现在我正在处理多个列,这是一团糟.

基本上我必须包括display: block让分页符正常工作,但这使得它从格式良好的表转到此:

在此输入图像描述

我在MDN的列表中只是尝试了可能有用的任何东西.

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

此外,分页符仅在单独使用时才起作用,

这是不合需要的,因为它会生成空白页.通过移动pagebreak到而不是移动来解决这个问题 ) } return dataPoint; } // Start generating the row data renderDataRow() { let dataRow = []; for (let i = 1; i <= 5; i++) { dataRow.push( { this.renderDataPoint() } ) } 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( { this.renderDataRow() } { i % 2 === 0 ? : null } ) } 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( // // // // // {this.renderDataRow()} // // ) // } // return sections; // } // Render the table with : null } .... ... //Corrected Page break ...

对应的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 React版本



1> MT-FreeHongK..：

我想出了一个更加硬编码的方法(所以调用完全解决了你的问题).我必须说它不优雅.

我的方法的主要思想是tbody改为display:block(像往常一样),但也添加.pagebreak到目标tbody.

但是,此方法tbody无法从表格中取消,因此不再与之对齐thead.这就是为什么我添加一个tr用于打印thead 的原因,并thead在打印时删除原点.

添加打印,不在普通视图中显示

//Thead part, add a printing thead only shown in Print
//As originaly thead will has alloction problem
{ i % 2 === 1 ?
: null } .... ... //Corrected Page break ...

对应的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 React版本

为了实现MatrixTai解决方案,index.js的第42行变为``
我测试了MatrixTai修复并在github上提交了他的解决方案:[https://github.com/xsimo/page-breaks/commit/8dd6c7974d2ef03ebf53a256dce05f2db23c0926]
推荐阅读
  • object

    iOS数据库Sqlite的SQL语句分类和常见约束关键字

    本文介绍了iOS数据库Sqlite的SQL语句分类和常见约束关键字。SQL语句分为DDL、DML和DQL三种类型，其中DDL语句用于定义、删除和修改数据表，关键字包括create、drop和alter。常见约束关键字包括if not exists、if exists、primary key、autoincrement、not null和default。此外，还介绍了常见的数据库数据类型，包括integer、text和real。 ... [详细]
  • select

    关于cuowu类的错误提示和使用AdjustmentListener的问题

    本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]
  • select

    用Vue实现的Demo商品管理效果图及实现代码

    用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • main

    JS进修笔记——闭包的运转机制和作用域

    本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • object

    在类中定义数组时出错 - Error on defining arrays in class

    Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • bit

    C#生成随机数的三种方法及其问题分析

    本文介绍了C#中生成随机数的三种方法，并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法，但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数，进一步突显了这个问题。文章指出，随机数生成在任何编程语言中都是必备的功能，但Random类生成的随机数并不可靠。最后，提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • jsp

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • select

    ASP.NET Tips: 获取插入记录的ID的方法详解

    本文详细介绍了在ASP.NET中获取插入记录的ID的几种方法，包括使用SCOPE_IDENTITY()和IDENT_CURRENT()函数，以及通过ExecuteReader方法执行SQL语句获取ID的步骤。同时，还提供了使用这些方法的示例代码和注意事项。对于需要获取表中最后一个插入操作所产生的ID或马上使用刚插入的新记录ID的开发者来说，本文提供了一些有用的技巧和建议。 ... [详细]
  • sum

    SpringJdbcTemplate的使用详解

    本文详细介绍了Spring的JdbcTemplate的使用方法，包括执行存储过程、存储函数的call()方法，执行任何SQL语句的execute()方法，单个更新和批量更新的update()和batchUpdate()方法，以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ... [详细]
  • object

    ASP.NET2.0数据教程之十四：使用FormView的模板

    ASP.NET2.0数据教程之十四：使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观，与GridView和DetailsView不同，FormView使用模板来呈现，可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • select

    MyBatis多表查询与动态SQL使用

    MyBatis多表查询与动态SQL使用
    本文介绍了MyBatis多表查询与动态SQL的使用方法，包括一对一查询和一对多查询。同时还介绍了动态SQL的使用，包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]
  • jsp

    Java学习笔记之使用反射+泛型构建通用DAO

    Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法，通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作，从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
  • select

    MySQL语句大全：创建、授权、查询、修改等【MySQL】的使用方法详解

    MySQL语句大全：创建、授权、查询、修改等【MySQL】的使用方法详解
    本文详细介绍了MySQL语句的使用方法，包括创建用户、授权、查询、修改等操作。通过连接MySQL数据库，可以使用命令创建用户，并指定该用户在哪个主机上可以登录。同时，还可以设置用户的登录密码。通过本文，您可以全面了解MySQL语句的使用方法。 ... [详细]
  • object

    如何在Laravel DB :: insert中返回OUTPUT子句的值？

    本文介绍了在使用Laravel和sqlsrv连接到SQL Server 2016时，如何在插入查询中使用输出子句，并返回所需的值。同时讨论了使用CreatedOn字段返回最近创建的行的解决方法以及使用Eloquent模型创建后，值正确插入数据库但没有返回uniqueidentifier字段的问题。最后给出了一个示例代码。 ... [详细]
  • main

    linux进阶50——无锁CAS

    linux进阶50——无锁CAS
    1.概念比较并交换(compareandswap，CAS)，是原⼦操作的⼀种，可⽤于在多线程编程中实现不被打断的数据交换操作࿰ ... [详细]
author-avatar
卸妆乳123
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
     
.

我无法解决这些问题; 关于如何解决这个问题的任何建议？

不确定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(
{ num <25 ? null : num }
Test - { i }
Section - { i }
// Section - {i} //
render() { return ( { this.renderSections() }
Results 1 2 3
) } } ReactDOM.render(, 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;
    }
}

MT-FreeHongK.. 10

我想出了一个更加硬编码的方法(所以调用完全解决了你的问题).我必须说它不优雅.

我的方法的主要思想是tbody改为display:block(像往常一样),但也添加.pagebreak到目标tbody.

但是,此方法tbody无法从表格中取消,因此不再与之对齐thead.这就是为什么我添加一个tr用于打印thead 的原因,并thead在打印时删除原点.

添加打印,不在普通视图中显示

//Thead part, add a printing thead only shown in Print
//As originaly thead will has alloction problem
{ i % 2 === 1 ?
Results 1 2 3
Results 1 2 3