如何在打印时将div表拆分为页面

时间:2019-03-21 09:29:33

标签: css html5 printing bootstrap-4 page-break

我希望在打印时将表格分成几页。

我找到了一些答案

  .div-table-body{
    page-break-inside:auto !important;
    border:1px solid #ff22ff;
  }
 .div-table-row{
    page-break-inside:avoid; 
    page-break-before:auto;
  }

但是它们都不起作用。那我做错了吗?

这是我的代码。我用div创建了一个表

<div class="div-table" id="listLables">
 <div class="div-table-heading">
  <div class="div-table-row">
   <div class="div-table-col">Result</div>
  </div>
 </div>
 <div class="div-table-body">
  <div class="div-table-row">
   <div class="div-table-col">ID</div>
  </div>
<!-- It nust have a lot or additional row and the page must break before one of them-->
 </div>
</div>

这是格式化我的表格的CSS代码

/* div table */

.div-table {
  display: table;
  width: 100%;
    border-collapse: collapse;
}
.div-table-row {
  display: table-row;
    border-bottom: 1px dotted #666666   ;

    clear: both;
}
.div-table-col {
  float: left;
  display: table-cell;
    padding: 10px 10px;
    height: 45px;
    vertical-align:middle;
}

.div-table-heading{
    display: table-row-group;
}
.div-table-body{
    display: table-row-group;
}
.div-table-heading .div-table-row:nth-child(1){
        background-color: #aaa;
        color:white;
}

现在,尽管我尝试使用page-break-inside:auto,但我不知道如何修改CSS以将表分成几页。

0 个答案:

没有答案