Как разбить таблицу div на страницу при печати - PullRequest
Новая
       46

Как разбить таблицу div на страницу при печати

0 голосов
/ 21 марта 2019

Я хочу разбить таблицу на страницы во время печати. ​​

Я нашел ответ с 

  .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;
}

Теперь мне интересно, как я могу изменить CSS, чтобы разделить таблицуна несколько страниц, несмотря на мою попытку с page-break-inside:auto.

...