javascript - HTML to PDF conversion for large table

Question

I am trying to convert a large HTML table to PDF but upon conversion I am getting distorted table.

I used the following CSS:

    .ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused{background:#f5fafe;border-style:none;outline:1px solid #1f89e5;outline-offset:-1px}
.ck .ck-insert-table-dropdown__grid{display:flex;flex-direction:row;flex-wrap:wrap}
.ck .ck-insert-table-dropdown__grid{width:calc(12px*10 + 1px*20 + 10px*2);padding:10px 10px 0}
.ck .ck-insert-table-dropdown__label{text-align:center}
.ck .ck-insert-table-dropdown-grid-box{width:12px;height:11px;margin:1px;border:1px solid #c4c4c4;border-radius:1px}
.ck .ck-insert-table-dropdown-grid-box.ck-on{border-color:#1f89e5;background:#bcdefb}
.ck-content .table{margin:1em auto;display:table}
.ck-content .table table{border-collapse:collapse;border-spacing:0;border:1px double #7d7878}
.ck-content .table table td, .ck-content .table table th{min-width:2em;padding: .4em;border-color:#7d7878}
.ck-content .table table th{font-weight:700;background:#fafafa}table{width:100%;margin:20px 0;border-collapse:collapse;border-top:1px solid #ddd;border-left:1px solid #ddd}
table .heading{background:#666;color:#fff;text-transform:uppercase;text-align:center}
table th, table td{border-bottom:1px solid #ddd;border-right:1px solid #ddd}
table th{font-weight:bold}
table .hover{background:#ccc}
@page{ margin: 100px 50px 50px}

table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; }

figure.table{ width: 100%;border-collapse:collapse;line-height:normal;font-size: 11px;border-top: 1px solid #333; border-bottom: 1px solid #333; -fs-table-paginate: paginate; border-spacing: 0px;}

question from:https://stackoverflow.com/questions/65950209/html-to-pdf-conversion-for-large-table

Answer 1

Waitting for answers