Why does bottom table cell that has centered-text get cut off when displayed as PDF in iOS?

I had many troubles with PDF rendering in order to keep the exact same aspect and size then my HTML file once transformed (mostly because of resolution translation problems).

The best and simpliest workaround that I found is to encapsulate the content in a container that exactly fit the height of the document.
You can use the media query to apply your css code only on the print result if you want to display your source html file.

table, th, td {
  border-collapse: collapse;
  border: 3px solid black;
  text-align: center;

table.main-table {
  width: 1012px;
  height: 515px;
  background-color: #f4f4f4;

table.bottom-table {
  width: 1012px;

@media print {
    height:1100px;/* adjust the height to fit your PDF document*/
<div class="main-container">
  <table class="main-table">
    <tr><td>Hello World.</td></tr>
  <table class="bottom-table">
    <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr>

Leave a Comment