Подсчет страниц на css - PullRequest
Новая
       0

Подсчет страниц на css

1 голос
/ 27 марта 2020

Мне нужна небольшая помощь. Я пытаюсь в течение нескольких часов заставить это работать. Google и поиск решений о чем-то вроде: 

@page {
  counter-increment: page 2;
}

Мне нужно получить номер страницы при печати. ​​

Есть идеи, почему моя не работает? Или у кого-нибудь есть решение? Важно: последняя таблица может содержать от 1 до 500 строк, а сама tr имеет переменную высоту из-за длинных текстов. Поэтому я не могу перелистывать страницы после специального элемента

Спасибо за помощь

https://jsfiddle.net/5z7buxjr/

 @media print {
  body {
    -webkit-print-color-adjust: exact;
  }

  @page {
    counter-increment: page 2;
    margin: 10px;
    size: A4 landscape;
  }

  body div {
    font-family: Calibri;
    font-size: 11pt;
  }
}

.a4_landscape {
  margin: 0;
  padding: 0.5cm;
}

.footer {
  bottom: 0;
  position: fixed;
  width: 97%;
}

.footer > div {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.header {
  display: flex;
  justify-content: space-between;
  text-align: right;
}

.middle_center {
  background-color: #b8cce4;
  text-align: center;
  width: 100%;
}

.middle_first div div div {
  white-space: nowrap;
}

.middle_first {
  display: flex;
  justify-content: space-between;
  width: 60%;
}

.placeholöder {
  height: 2em;
  width: 100%;
}

.size_11 {
  font-family: Calibri;
  font-size: 11pt;
}

.size_16 {
  font-family: Calibri;
  font-size: 16pt;
}

.text_bold {
  font-weight: 700;
}

#maintable {
  width: 100%;
}

#page_number: : after {
  content: counter(page);
}

#table_goodsdata,
#table_packagedata {
  border-collapse: collapse;
}

#table_goodsdata {
  margin-bottom: 100px;
  width: 100%;
}

#table_packagedata td,
#table_goodsdata td {
  border: 1px solid #000;
  padding-left: 3px;
  padding-right: 3px;
}
#table_goodsdata thead td {
  background-color: #b8cce4;
  text-align: center;
}
<html>
<head>


</head>
<body class="a4_landscape">
<table id="maintable">
  <thead><tr><td>
<div class="header">
  <div><img src="img/logo1.png"></div>
	<div>
	<div class="size_16">XXX</div>
<div class="size_11">XXXX</div>
<div class="size_16">XXXX</div>
<div id="page_number"><span></span></div>

</div>
 </div>
 <hr>   
 
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">
	<div class="middle">
<div class="middle_first">
<div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span></div>

</div>
<div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span>	XXXX</div>
<div><span class="text_bold">XXXX:</span></div>
</div>
</div>
<div class="placeholöder"></div>

<div class="middle_first">
<div>
<div><span class="text_bold">XXXX:</span></div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
</div>

<div>
<div><span class="text_bold">XXXX:</span></div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>
<div>XXXX</div>

</div>



</div>
	</div>
	</div>
  </td></tr>
  
  <tr><td>
    <div class="placeholöder"></div>
	<div class="middle_center">
  XXXX
  </div>
  <table id="table_packagedata"><tbody>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
</tr>
  </tbody></table>
  </td></tr>
  <tr><td>
  
<table id="table_goodsdata"><thead>
<tr>
	<td>XXXX</td>
	<td>XXXX</td>
	<td colspan="2">XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
</tr>
</thead><tbody>
   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>This can be a very long text so the cell height is variable, too</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	   <tr>
 	<td>XXXX</td>
		<td>XXXX</td>
		<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	<td>XXXX</td>
	</tr>
	
	
	</tbody>
	</table>
   </td></tr> 
  
  
  </tbody>
  <tfoot><tr><td>
    <div class="footer-space">&nbsp;</div>
  </td></tr></tfoot>
</table>
<div class="header"><div>

</div>
<hr>
	</div>

<div id="break" style='page-break-before:always'></div>
<div class="footer"><div>

<div id="page_number"><span></span></div>
<div>XXXX<br>
XXXX</div><div> XXXX</div>
    </div></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...