We Keep Coding

How to generate pdf from an html template with a React.js frontend?

I want to convert a plain HTML with basic CSS to a PDF document. I'm using React.js as my frontend framework. Ideally the conversion will be on the browser instead of the server, to not burden the server in case a lot of clients want to generate pdf documents.
The solutions I found are kind of weird to me. I expected to find a relatively simple library where you can pass a html object and returns a pdf binary data. But what I find is jsPDF that works with a canvas and it looks a bit overcomplicated to me.
It's possible to export the template html to pdf using the browser itself. However, I can't set, for example, a footer this way.
An example html could be like:
/* reset */
*
{
border: 0;
box-sizing: content-box;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: top;
}
/* content editable */
*[contenteditable] { border-radius: 0.25em; min-width: 1em; outline: 0; }
*[contenteditable] { cursor: pointer; }
*[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; }
span[contenteditable] { display: inline-block; }
/* heading */
h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }
/* table */
table { font-size: 75%; table-layout: fixed; width: 100%; }
table { border-collapse: separate; border-spacing: 2px; }
th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
th, td { border-radius: 0.25em; border-style: solid; }
th { background: #EEE; border-color: #BBB; }
td { border-color: #DDD; }
/* page */
html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }
/* header */
header { margin: 0 0 3em; }
header:after { clear: both; content: ""; display: table; }
header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
header address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; }
header address p { margin: 0 0 0.25em; }
header span, header img { display: block; float: right; }
header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
header img { max-height: 100%; max-width: 100%; }
header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }
/* article */
article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }
article address { float: left; font-size: 125%; font-weight: bold; }
/* table meta & balance */
table.meta, table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }
/* table meta */
table.meta th { width: 40%; }
table.meta td { width: 60%; }
/* table items */
table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }
table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }
/* table balance */
table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }
/* aside */
aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }
/* javascript */
.add, .cut
{
border-width: 1px;
display: block;
font-size: .8rem;
padding: 0.25em 0.5em;
float: left;
text-align: center;
width: 0.6em;
}
.add, .cut
{
background: #9AF;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
border-radius: 0.5em;
border-color: #0076A3;
color: #FFF;
cursor: pointer;
font-weight: bold;
text-shadow: 0 -1px 2px rgba(0,0,0,0.333);
}
.add { margin: -2.5em 0 0; }
.add:hover { background: #00ADEE; }
.cut { opacity: 0; position: absolute; top: 0; left: -1.5em; }
.cut { -webkit-transition: opacity 100ms ease-in; }
tr:hover .cut { opacity: 1; }
#media print {
* { -webkit-print-color-adjust: exact; }
html { background: none; padding: 0; }
body { box-shadow: none; margin: 0; }
span:empty { display: none; }
.add, .cut { display: none; }
}
#page { margin: 0; }
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Invoice</h1>
<address contenteditable>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<address contenteditable>
<p>Some Company<br>c/o Some Guy</p>
</address>
<table class="meta">
<tr>
<th><span contenteditable>Invoice #</span></th>
<td><span contenteditable>101138</span></td>
</tr>
<tr>
<th><span contenteditable>Date</span></th>
<td><span contenteditable>January 1, 2012</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Due</span></th>
<td><span id="prefix" contenteditable>$</span><span>600.00</span></td>
</tr>
</table>
<table class="inventory">
<thead>
<tr>
<th><span contenteditable>Item</span></th>
<th><span contenteditable>Description</span></th>
<th><span contenteditable>Rate</span></th>
<th><span contenteditable>Quantity</span></th>
<th><span contenteditable>Price</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
<td><span contenteditable>Experience Review</span></td>
<td><span data-prefix>$</span><span contenteditable>150.00</span></td>
<td><span contenteditable>4</span></td>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</tbody>
</table>
<a class="add">+</a>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>0.00</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</table>
</article>
<aside>
<h1><span contenteditable>Additional Notes</span></h1>
<div contenteditable>
<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
</div>
</aside>
</body>
</html>
Does anyone know a good solution for what I want? Converting a html with embedded styling to pdf? I'm willing to pay for a library, but I've to try it out first before I pay.

How to make one modal work for multiple button [duplicate]

This question already has answers here:
How to add one event listener for all buttons
(4 answers)
Closed 1 year ago.
It's working but only in one button here's my code. When i click at first button it showed up but when i click on the other buttons it doesnt show up. it seems that only at the first buttons its working. I also used the class to call the modal but it seems it also doesnt work.
<!DOCTYPE HTML>
<html>
<head>
<title>Video Records</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(wallpaper.jpg) ;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
.table-container{
padding: 0 10%;
margin: 40px auto 0;
}
.heading{
font-size: 40px;
text-align: center;
color:#FFFFFF;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
margin-bottom: 40px;
}
.table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 0 2px #FFD700;
border-radius: 6px;
}
.table thead{
background-color: #FFD700;
}
.table thead tr th{
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #000000;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #000000;
}
.table tbody tr td{
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #000000;
background-color: white;
padding: 8px;
text-align: center;
border: 1px solid #000000;
}
table tr:first-child th:first-child,
table.table tr:first-child {
border-top-left-radius: 6px;
}
table tr:first-child th:last-child,
table.table tr:first-child {
border-top-right-radius: 6px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.table tbody tr td .btn{
width: 130px;
text-decoration: none;
line-height: 35px;
background-color:#ee2828;
display: inline-block;
font-weight: medium;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 14px;
opacity: 1;
border-radius: 5px;
}
.table tbody tr td .btn:hover{
font-weight: bold;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: rgba(1, 1, 1, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.video-container .close{
position: absolute;
top:10%;
right: 25px;
font-size: 20px;
cursor: pointer;
color:white;
}
.video-container video{
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s;
}
.video-container.show{
pointer-events: all;
opacity: 1;
}
.video-container.show video{
transform: scale(1);
}
#media(max-width: 768px){
.table thead{
display: none;
}
.table, .table tbody, .table tr, .table td{
display: block;
width: 100%;
box-shadow: none;
}
.table tr{
margin-bottom: 15px;
}
.table tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
</style>
</head>
<body>
<div class="video-container" id="videoContainer">
<span class="close" id="close">✖</span>
<video src="video.mp4" controls autoplay></video>
</div>
<div class="table-container">
<h1 class="heading">Video Records</h1>
<table class="table">
<thead>
<tr>
<th>Video ID</th>
<th>File Name</th>
<th>Date</th>
<th>Time</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Video ID">0022332</td>
<td data-label="File Name">Videocapture.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022311</td>
<td data-label="File Name">Videocapture1.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022131</td>
<td data-label="File Name">Videocapture2.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0025321</td>
<td data-label="File Name">Videocapture3.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
</tbody>
</div>
<script type="text/javascript">
btn = document.getElementById("btn");
videoContainer = document.getElementById("videoContainer");
close = document.getElementById("close");
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
close.addEventListener('click',()=>{
videoContainer.classList.remove('show');
})
</script>
</body>
</html>
I think its because of my javascript so I kind of wondering if someone could help me to make it work in multiple buttons instead of one only

With getElementById you'll only get one HTML element. You should use getElementByClassName or querySelectorAll to get all the nodes that match the .class selector. And to attach event listenters to all the nodes in a NodeList object, you can use forEach.
document.querySelectorAll(".btn").forEach(btn => {
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
})
Learn more at https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

CSS Printing: Avoiding cut-in-half table between pages?

Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.
body {
opacity: 0;
}
#media print {
* {
-webkit-print-color-adjust: exact !important;
}
#font-face {
font-family: "YekanWeb";
src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
url("../fonts/YekanWeb-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#page {
margin-top: 0;
margin-bottom: 0;
padding-top: 1cm;
padding-bottom: 1cm;
}
h2.right-border {
background-color: #f3f5f7;
border-color: #42b983;
padding: 7px 10px;
border-right-width: 0.6rem;
border-right-style: solid;
margin: 1rem -15px;
}
body {
padding-top: 15px;
padding-bottom: 15px;
direction: rtl !important;
text-align: right !important;
font-family: "YekanWeb", arial, sans-serif !important;
}
.table-prices {
break-inside: avoid;
}
body {
opacity: 1 !important;
display: grid !important;
}
table {
page-break-inside: avoid;
}
table {
font-family: "YekanWeb", arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: right;
padding: 2px 8px;
font-weight: 700;
}
.table-invoice tr:nth-child(even) {
background: rgb(241 241 241 / 50%) !important;
}
.reports {
padding: 20px 10px;
font-family: "YekanWeb", "Calibri", "Adobe Arabic";
background: rgb(255, 255, 255);
}
.rep_header {
color: #555;
width: 100%;
height: 100px;
padding-bottom: 10px;
}
.container.rep_header {
border-bottom: 2px solid #333;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
margin-top: 20px;
width: 100%;
text-align: center;
}
.rep_header_logo {
margin: 0px 0px 0px 0px;
display: block;
float: right;
height: 90px;
text-align: right;
}
.rep_header_logo img {
height: 100%;
position: relative;
}
.rep_header_title {
margin: 0px 40px 0px 0px;
float: right;
display: block;
height: 100px;
text-align: right;
}
.rep_header_title h2 {
font-size: 32px;
text-align: right;
line-height: 90px;
vertical-align: middle;
}
.rep_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 150px;
text-align: right;
font-size: 13px;
}
.inv_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 140px;
text-align: right;
font-size: 12px;
}
.rep_body {
display: block;
width: 100%;
}
.rep_body_content {
display: block;
width: 100%;
}
.rep_overview {
padding: 0px;
}
.rep_description {
margin: 14px 0px 12px;
}
.paneldiv {
padding: 0px 1%;
}
.table-reports {
margin: 10px 0px 20px;
}
.table-reports tr th,
.table-reports tr td {
padding: 2px 8px;
vertical-align: top;
}
.table-reports thead tr th {
background: rgb(241 241 241 / 50%);
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tfoot tr th {
background: #eee;
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tr {
font-size: 12px;
}
.table-reports tr:nth-child(even) {
background: #efefef;
}
.rep_wait {
width: 100%;
text-align: center;
margin-top: 130px;
margin-bottom: 130px;
font-size: 40px;
color: #ccc;
}
.rep_no_result {
display: block;
width: 100%;
text-align: center;
margin: 150px 0px;
font-size: 21px;
color: #999;
}
.invoice_heading {
display: block;
width: 98%;
margin: 30px 1%;
font-size: 16px;
}
.in_info {
width: 20%;
text-align: left;
display: block;
float: left;
left: 0px;
}
.or_datetime {
margin: 15px 0px 15px 0px;
font-size: 12px;
color: #777;
font-weight: normal !important;
}
.cu_in_table {
width: 100%;
}
.cu_in_table tr td {
border: 1px solid #999;
font-size: 14px;
padding: 2px 6px;
font-weight: 700;
}
.invtablediv {
display: block;
padding: 0px !important;
}
.table-invoice {
width: 100%;
}
.table-invoice tr th {
padding: 1px 8px;
vertical-align: top;
text-align: center;
border: 1px solid #c2bfbf;
font-size: 12px;
font-weight: 700;
}
.table-invoice tr td {
font-size: 14px;
padding: 3px 8px 2px;
vertical-align: top;
text-align: right;
font-weight: 700;
border: 1px solid #cfcfcf;
}
.table-invoice thead tr th {
background: #ddd;
font-weight: 700;
font-size: 14px;
line-height: 24px;
direction: rtl !important;
text-align: right !important;
}
.table-itemreceipt thead tr th {
line-height: 16px !important;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
background: #e9e9e9;
font-weight: 700;
font-size: 11px;
line-height: 20px;
direction: rtl !important;
text-align: right;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
}
.table-invoice tr {
font-size: 10px;
}
.inv_stamp {
display: block;
padding: 0px 0px;
float: right;
width: 100%;
margin: 15px 0px;
font-size: 12px;
font-weight: 700;
}
.inv_desc {
display: block;
padding: 0px 4px;
margin: 0px 0%;
font-weight: 700;
}
.table-prices {
float: left;
max-width: 50%;
width: min-content;
}
.table-prices th {
white-space: nowrap;
}
.table-prices tr {
background: rgb(241 241 241 / 50%);
}
.inv_verify {
display: block;
padding: 0px 4px;
width: 56%;
width: 100%;
height: 120px;
margin: 10px 0%;
}
.inv_notesdiv {
display: block;
padding: 0px 4px;
float: right;
width: 98%;
margin: 20px 0%;
font-size: 10px;
}
.inv_note {
display: block;
width: 100%;
margin: 8px 0%;
}
.rep_footer {
display: block;
float: right;
width: 80%;
text-align: center;
color: #ccc;
margin-top: 30px;
}
.inv_footer {
background: #fff;
position: fixed;
bottom: 10px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #555;
line-height: 16px;
}
.invz_footer {
border-top: 2px solid #333 !important;
background: #fff;
position: fixed !important;
bottom: 4px !important;
margin-top: 60px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #777;
line-height: 16px;
}
.invz_footer .company_desc,
.invz_footer .company_contact,
.invz_footer .company_address {
display: block;
float: right;
text-align: right;
font-size: 12px;
}
.invz_footer .company_desc {
width: 40%;
}
.invz_footer .company_contact {
width: 30%;
}
.invz_footer .company_address {
width: 30%;
}
.transaction-block {
display: block;
width: 98%;
margin: 0px 1%;
font-size: 14px;
}
.tr_date table tr td {
padding-left: 4px;
}
.tr_titles {
margin-top: 10px;
}
.tr_titles table tr td {
padding-left: 4px;
}
.tr_desc_table {
width: 100%;
margin-top: 20px;
}
.tr_desc_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd;
border: 1px solid #c2bfbf;
}
.tr_desc_table tbody tr td {
padding: 4px 0;
text-align: center;
border: 1px solid #cfcfcf;
}
.narrations {
margin-top: 20px;
}
.blank_line_label {
display: inline-block;
width: 80px;
}
.blank_line {
display: inline-block;
width: 450px;
border-bottom: 2px solid #aaa;
margin: 0 10px;
}
.verification_area {
width: 100%;
display: block;
margin-top: 20px;
}
.verification_area .tr_titles {
width: 100%;
display: block;
text-align: center;
}
.verification_area .signatures {
display: inline-block;
width: 15%;
margin: 80px 4% 20px;
padding-top: 6px;
border-top: 1px solid #999;
}
.tr_cost_table {
width: 100%;
font-size: 14px;
margin-top: 20px;
}
.tr_cost_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd i !important;
}
.tr_cost_table tbody tr td {
padding: 4px 0;
text-align: center;
}
.tr_cost_table tfoot tr td {
line-height: 26px;
background: #e4e4e4 !important;
}
.bs_tr_s td {
line-height: 0.3rem !important;
}
.table-prices tr th:first-child {
text-align: left !important;
width: 192px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
<link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>
<body onload="window.print()">
<div class="container rep_header">
<header class="rep_header">
<div class="rep_header_logo"><img src="/img/default/logo.png"></div>
<div class="rep_header_title">
<h2>شرکت تجارتی شایق علیمی لمیتد</h2>
</div>
<div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
</header>
</div>
<div class="container mt-5">
<h2 class="right-border">معلومات آقر</h2>
<div class="row justify-content-between">
<table class="cu_in_table pull-left">
<thead>
<tr>
<td style="width:20%;">سریال نمبر: </td>
<td style="width:80%;">
WB-101
</td>
</tr>
</thead>
<tbody>
<tr>
<td>عنوان:</td>
<td><span class="cu_name">Ducimus do illo id</span>
</td>
</tr>
<tr>
<td>تاریخ نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
</tr>
<tr>
<td>تاریخ آفرگشایی:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس آفرگشایی: </td>
<td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
</tr>
<tr>
<td>تاریخ ختم پیشنهاد:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>شماره شناسایی آقر:</td>
<td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
</tr>
<tr>
<td>مرجع مربوطه:</td>
<td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
</tr>
<tr>
<td>تضمین آفر:</td>
<td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<h2 class="right-border">لیست محصولات</h2>
<div class="row justify-content-between">
<div class="invtablediv">
<table class="table-invoice">
<thead>
<tr>
<th style="width:4%; text-align: center !important;">#</th>
<th style="width:14%; text-align: center !important;">نام محصول</th>
<th style="width:15%; text-align: center !important;">مقدار</th>
<th style="width:10%; text-align: center !important;">فی واحد</th>
<th style="width:15%; text-align: center !important;">مجموع</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Armando Welch</td>
<td>6348</td>
<td>3</td>
<td>19044</td>
</tr>
<tr>
<td>2</td>
<td>2021 سوپر</td>
<td>109980</td>
<td>12</td>
<td>1319760</td>
</tr>
<tr>
<td>3</td>
<td>Cruz Lee</td>
<td>10235</td>
<td>30</td>
<td>307050</td>
</tr>
<tr>
<td>4</td>
<td>Armando Welch</td>
<td>36</td>
<td>2222</td>
<td>79992</td>
</tr>
</tbody>
</table>
<br>
<table class="table-prices text-right float-left">
<thead>
<tr>
<th>قیمت مجموعی اجناس :</th>
<th style="width:142px;">1725846 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">ارزش آقر :</th>
<th>614624 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تامینات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">مالیات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">انتقالات :</th>
<th>0 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">خدمات :</th>
<th>1444 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تخفیف :</th>
<th>1111222 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">قیمت نرخ دهی :</th>
<th>1725846 AFN</th>
</tr>
</thead>
</table>
<div class="inv_stamp pull-left margin-top-30" style="width:50%;">
<div class="inv_desc">
ملاحضات:<br>
<div class="inv_desc_detail">
به تعداد (4) قلم جنس برای محترم/محترمه
"ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
آفر تهیه شده است.
</div>
</div>
<div class="inv_verify margin-top-30">
مهر و امضاء:<br>
<div class="inv_desc_detail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
شرکت شایق علیمی</span>
</div>
</div>
</body>
<script>
</script>
</html>

You need to add margins to your page like this:
#page {
margin: 72px 72px 138.24px 72px;
}
and also add these style to avoid breaking your table
table {
page-break-inside: avoid;
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
table tfoot thead {
break-inside: auto;
overflow: hidden;
}

Table add row, edit row, save row, delete row Using HTML, CSS, JS

I'm doing some test project. I already done some part like add edit or save but I'm stuck with some coding issues. Table add row, Edit Row, Save row, Delete are working fine but when I'm deleting, sr no need to be rearrange like 1, 2, 3, 4. And sometimes table structure also breaking. Can anyone help me??
$(document).ready(function(){
$(".addRow").click(function(){
var trCount = $("tr").length;
if($(".deleterow").is(':visible')){
$("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>"+ trCount +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");
} else {
$("table").append("<tr><td class='deleterow'>X</td><td class='srno'>"+ trCount +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");
}
});
$(".editAll").click(function(){
$("input").attr("readonly", false);
});
$(".saveAll").click(function(){
$("input").attr("readonly", true);
$("th:first-child").hide();
$("td:first-child").hide();
});
$(".delete").click(function(){
$("th:first-child").show();
$("td:first-child").show();
});
$(document).find("table").on('click','.deleterow', function(){
$(this).parent("tr").remove();
var totalLength = $("tr").length;
$("table").find("tr:nth-child(2)").children("td.srno").html();
});
});
.addRow {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.editAll {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.saveAll {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.delete {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.fulltable {
width: 100%;
border: 1px solid #000;
text-align: left;
clear: both;
margin: 30px 0 0;
}
.fulltable th {
border: 1px solid #000;
padding: 10px;
}
.fulltable th:first-child {
width: 50px;
display: none;
text-align: center;
}
.fulltable th:nth-child(2) {
width: 100px;
text-align: center;
}
.fulltable td {
border: 1px solid #000;
}
.fulltable td:first-child {
width: 50px;
display: none;
text-align: center;
}
.fulltable td:nth-child(2) {
text-align: center;
}
.fulltable td input {
width: 100%;
padding: 10px;
border: 0;
box-sizing: border-box;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="addRow" href="#">Add Row</a>
<a class="editAll" href="#">Edit All</a>
<a class="saveAll" href="#">Save All</a>
<a class="delete" href="#">Delete</a>
<table cellspacing="0" class="fulltable">
<tr>
<th>Delete</th>
<th>Sr No.</th>
<th>Name</th>
<th>Id</th>
<th>Description</th>
</tr>
<tr>
<td class="deleterow">X</td>
<td class="srno">1</td>
<td class="name"><input type="text"></td>
<td class="id"><input type="text"></td>
<td><input class="description" type="text"></td>
</tr>
</table>

You can loop over each srno to re-order the numbers, just add these lines in your $(".saveAll").click() function :
var srno = 0;
$(".srno").each(function() {
$(this).text(srno+1);
srno++;
});
$(document).ready(function() {
$(".addRow").click(function() {
var trCount = $("tr").length;
if ($(".deleterow").is(':visible')) {
$("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");
} else {
$("table").append("<tr><td class='deleterow'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");
}
});
$(".editAll").click(function() {
$("input").attr("readonly", false);
});
$(".saveAll").click(function() {
$("input").attr("readonly", true);
var srno = 0;
$(".srno").each(function() {
$(this).text(srno + 1);
srno++;
});
$("th:first-child").hide();
$("td:first-child").hide();
});
$(".delete").click(function() {
$("th:first-child").show();
$("td:first-child").show();
});
$(document).find("table").on('click', '.deleterow', function() {
$(this).parent("tr").remove();
var totalLength = $("tr").length;
$("table").find("tr:nth-child(2)").children("td.srno").html();
});
});
.addRow {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.editAll {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.saveAll {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.delete {
border: 1px solid #000;
padding: 6px 10px;
text-decoration: none;
color: #000;
display: inlne-block;
}
.fulltable {
width: 100%;
border: 1px solid #000;
text-align: left;
clear: both;
margin: 30px 0 0;
}
.fulltable th {
border: 1px solid #000;
padding: 10px;
}
.fulltable th:first-child {
width: 50px;
display: none;
text-align: center;
}
.fulltable th:nth-child(2) {
width: 100px;
text-align: center;
}
.fulltable td {
border: 1px solid #000;
}
.fulltable td:first-child {
width: 50px;
display: none;
text-align: center;
}
.fulltable td:nth-child(2) {
text-align: center;
}
.fulltable td input {
width: 100%;
padding: 10px;
border: 0;
box-sizing: border-box;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="addRow" href="#">Add Row</a>
<a class="editAll" href="#">Edit All</a>
<a class="saveAll" href="#">Save All</a>
<a class="delete" href="#">Delete</a>
<table cellspacing="0" class="fulltable">
<tr>
<th>Delete</th>
<th>Sr No.</th>
<th>Name</th>
<th>Id</th>
<th>Description</th>
</tr>
<tr>
<td class="deleterow">X</td>
<td class="srno">1</td>
<td class="name"><input type="text"></td>
<td class="id"><input type="text"></td>
<td><input class="description" type="text"></td>
</tr>
</table>

Unhide description with popup in my table (html text-overflow ellipsis)

So, here is my sample code:
JSFIDDLE
I would like to popup my hidden long description text correctly.
I can unhide it, but why is the short description cell of my table is so un-fit?(like as border and width of my cell)
I would like to line break my long popup description to 100px...
.table {
border-collapse: collapse;
border-spacing: 0;
width: 120%;
table-layout: fixed;
}
td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
overflow: hidden;
word-break: normal;
}
.main-header {
border-style: solid;
border-width: 2px;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.header {
border-style: solid;
border-width: 2px;
text-align: center;
font-weight: bold;
}
.name {
border-style: solid;
border-width: 1px;
text-align: center;
}
.description {
border-style: solid;
border-width: 1px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
position: relative;
width: 100%;
}
.description:hover {
z-index: 1;
width: auto;
background-color: #000000;
color: #ffffff;
}
.qt {
border-style: solid;
border-width: 1px;
text-align: right;
}
.price {
border-style: solid;
border-width: 1px;
text-align: right;
}
<table class="table">
<tr>
<th class="main-header" colspan="4">Test Main Header</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td class="header">Name</td>
<td class="header">Description</td>
<td class="header">qt</td>
<td class="header">Price</td>
</tr>
<tr>
<td class="name">Test product name</td>
<td class="description">Test long description lféjksdéflé lksajdf sadlkjlék sadflkjasd lfljkjlkjléas dflk</td>
<td class="qt">22 pcs</td>
<td class="price">$370</td>
</tr>
</table>