Skip to content

Instantly share code, notes, and snippets.

@mddanishansari

mddanishansari/html-pdf-issue.html

Created July 20, 2020 15:51
Show Gist options
  • Save mddanishansari/dcb22beaa355c4ee2b8b328160a6f026 to your computer and use it in GitHub Desktop.
Save mddanishansari/dcb22beaa355c4ee2b8b328160a6f026 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html-pdf-issue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w-100 {
width: 100% !important;
}
.border-collapse {
border-collapse: collapse !important;
}
@page {
margin: 0px;
padding: 0px;
}
.my-table th,
.my-table td {
border: 1px solid yellow !important;
text-align: center;
color: white;
}
.my-table th {
background-color: green;
}
.my-table td {
background-color: blue;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet lacus orci, a semper mauris vestibulum
sit amet. Morbi odio tellus, convallis in commodo in, consequat sed lorem. Donec ac dictum dui, sit amet dictum
est. Nam mi elit, imperdiet ac libero non, luctus efficitur justo. Praesent porta tincidunt euismod. Morbi vitae
neque a ipsum finibus pretium vel id enim. Quisque non scelerisque enim. Sed ultricies, erat ac pulvinar
pellentesque, urna dui tristique felis, quis tempor ipsum nisl ac risus. Morbi elementum accumsan sapien nec
congue. Ut imperdiet orci eget ultricies maximus. Suspendisse potenti. Nulla commodo lacus in viverra mollis.
</p>
<p>
Duis tempus in elit nec tempus. Nulla non iaculis nunc. Mauris leo elit, congue at elementum non, faucibus quis
diam. Etiam aliquet hendrerit nibh. Suspendisse felis dolor, rhoncus id pellentesque nec, laoreet quis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dignissim leo, quis venenatis felis.
</p>
<p>
Ut eu interdum lectus, ac dignissim odio. Quisque euismod, dolor ut tincidunt efficitur, metus dui viverra
lorem, quis tincidunt felis massa et tellus. Mauris dignissim lobortis convallis. Aenean lacus metus, posuere a
dictum in, pellentesque nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nam maximus, nibh eu pellentesque semper, arcu nibh semper ligula, sed tempus purus mauris at
sapien. Duis ullamcorper justo non ex venenatis sagittis. Pellentesque dignissim luctus tincidunt. Pellentesque
eget risus ante. Duis condimentum lectus id eros posuere, sed suscipit diam ullamcorper. Morbi massa diam,
ultricies ac mattis id, luctus ac ante. Donec porta volutpat mauris, vitae interdum nulla euismod eu.
</p>
<p>
Maecenas ante turpis, posuere in turpis quis, rutrum rhoncus nisl. Integer mattis magna at neque consequat
mollis. Praesent egestas tortor sed euismod laoreet. Donec facilisis vestibulum egestas. Nullam dignissim eros
et vehicula dictum. Integer mollis est orci, vel tristique turpis finibus nec. Morbi id felis dolor.
</p>
<p>
Morbi dignissim finibus massa et egestas. Aliquam erat volutpat. Suspendisse dapibus ligula non vulputate
lacinia. Nulla in turpis ut arcu ornare hendrerit. Vestibulum lacinia fringilla tellus sit amet finibus. Nam
porta accumsan consequat. Etiam vestibulum vitae ante id lacinia. In dolor sem, lacinia sed enim in, gravida
porta tortor. Nulla a erat scelerisque, posuere tortor sit amet, condimentum nibh. Sed eu molestie tortor. Cras
malesuada nisi sit amet ipsum vulputate elementum. Sed id diam iaculis, lobortis dui vitae, molestie purus.
Integer nec diam ac tortor tincidunt pellentesque quis id ante. Aenean convallis ex vel metus laoreet
sollicitudin eu non metus. Morbi vehicula dolor eget ligula tincidunt aliquet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet lacus orci, a semper mauris vestibulum
sit amet. Morbi odio tellus, convallis in commodo in, consequat sed lorem. Donec ac dictum dui, sit amet dictum
est. Nam mi elit, imperdiet ac libero non, luctus efficitur justo. Praesent porta tincidunt euismod. Morbi vitae
neque a ipsum finibus pretium vel id enim. Quisque non scelerisque enim. Sed ultricies, erat ac pulvinar
pellentesque, urna dui tristique felis, quis tempor ipsum nisl ac risus. Morbi elementum accumsan sapien nec
congue. Ut imperdiet orci eget ultricies maximus. Suspendisse potenti. Nulla commodo lacus in viverra mollis.
</p>
<p>
Duis tempus in elit nec tempus. Nulla non iaculis nunc. Mauris leo elit, congue at elementum non, faucibus quis
diam. Etiam aliquet hendrerit nibh. Suspendisse felis dolor, rhoncus id pellentesque nec, laoreet quis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dignissim leo, quis venenatis felis.
</p>
<p>
Duis tempus in elit nec tempus. Nulla non iaculis nunc. Mauris leo elit, congue at elementum non, faucibus quis
diam. Etiam aliquet hendrerit nibh. Suspendisse felis dolor, rhoncus id pellentesque nec, laoreet quis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dignissim leo, quis venenatis felis.
</p>
<p>
Duis tempus in elit nec tempus. Nulla non iaculis nunc. Mauris leo elit, congue at elementum non, faucibus quis
diam. Etiam aliquet hendrerit nibh. Suspendisse felis dolor, rhoncus id pellentesque nec, laoreet quis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dignissim leo, quis venenatis felis.
</p>
<p>
Duis tempus in elit nec tempus. Nulla non iaculis nunc. Mauris leo elit, congue at elementum non, faucibus quis
diam. Etiam aliquet hendrerit nibh. Suspendisse felis dolor, rhoncus id pellentesque nec, laoreet quis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dignissim leo, quis venenatis felis.
</p>
<p>
Ut eu interdum lectus, ac dignissim odio. Quisque euismod, dolor ut tincidunt efficitur, metus dui viverra
lorem, quis tincidunt felis massa et tellus. Mauris dignissim lobortis convallis. Aenean lacus metus, posuere a
</p>
<p>
Ut eu interdum lectus, ac dignissim odio. Quisque euismod, dolor ut tincidunt efficitur, metus dui viverra
lorem, quis tincidunt felis massa et tellus. Mauris dignissim lobortis convallis. Aenean lacus metus, posuere a
lorem, quis tincidunt felis massa et tellus. Mauris dignissim lobortis convallis. Aenean lacus metus, posuere a
</p>
<table class="my-table w-100 border-collapse border-box">
<thead>
<tr>
<th colspan="3">TH1</th>
<th colspan="2">TH2</th>
</tr>
<tr>
<th>TH1</th>
<th>TH2</th>
<th>TH3</th>
<th>TH4</th>
<th>TH5</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment