Question

尝试在Chrome打包的应用上打印自定义表格时遇到问题，尝试在每个打印页面上都有至少固定的标题。

每个打印页面上我想要的内容：

表头，（标题）
边距相等
自定义页码

这些甚至可能，找不到任何真正的解决方案。

如果我尝试使用 display：table-column-group; ，

面临的问题是标题宽度不再是100％，并且仍然没有在每个页面上都有该标题..

我做了一个片段我得到了多远......

$(document).ready(function() {

    var row = $(".custom-table section .row");
    for(var i=2;i<200;i++) {
       var newRow = row.clone();  
       newRow.find(".cell:first").text(i);
       newRow.appendTo(".custom-table section");
    }
  
    $(".print-button").click(function(ev) {
       window.print();
    });
});

.custom-table {
  padding-top: 90px;
  position: relative;
}
header {
  position: absolute;
  height: 90px;
  top: 0px;
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,0.0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.custom-table section {
  height: 300px;
  overflow-y: overlay;
}
.row {
  display: flex;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.5);
}
.cell {
  flex: 1;
  padding: 8px;
}
.print-button {
  position: absolute;
  right: 108px;
  top: 8px;
  background: #00BFFF;
  color: #FFF;
  border: 0px;
  padding: 8px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
  transition: all 0.2s linear;
  cursor: pointer;
}
.print-button:hover {
  box-shadow: 0px 0px 1px;
  transition: all 0.2s linear;
}

@media print {
  @page { margin: 0; }
  /*body { margin: 1.6 cm !important;  }*/
  .row {
    width: 100% !important; 
    page-break-inside:avoid;
  }
  .custom-table header {
    /*display: table-header-group;*/
  }
  .custom-table section {
    overflow: visible;
    height: auto;
  }
  .print-button { display: none; }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang='fi'>
  <head></head>
    <body>
       <section class='custom-table'>
           <header class='each-page-header'>
               <h4>Contacts</h4>
               <button class='print-button'>Print</button>
               <div class='row'>
                   <div class='cell'>Nro</div>
                   <div class='cell'>Name</div>
                   <div class='cell'>Tel</div>
               </div>
           </header>
           <section>
               <div class='row'>
                   <div class='cell'>1</div>
                   <div class='cell'>Row Name</div>
                   <div class='cell'>Row Number</div>
               </div>
           <section>
       </section>
    </body>
</html>

如何在每页打印带有标题的表格并将页边距设置为零行制动问题

0 个答案: