I have been using swift mailer in Drupal 9 to email the submission with a PDF file to the recipient. I have written twig to format the submission in PDF attachment field. However, when I open the PDF file, it is not formatted in a proper way. First, I have been trying to remove that submission #17 on the image but I cannot find it in anywhere, then I want to format the first table better. Here is my twig code in View Mode

<table>     <tr>         <th>Name: </th>         <td>[webform_submission:values:name_]</td>         <th>New Advance: </th>         <td>[webform_submission:values:total_reimbursement_01_new_advance_]</td>     </tr>     <tr>         <th>Begin Date: </th>         <td>[webform_submission:values:begin_date_]</td>         <th>Carry-over amount: </th>         <td>[webform_submission:values:begin_date_]</td>     </tr>     <tr>         <th>End Date: </th>         <td>[webform_submission:values:end_date_]</td>         <td rowspan="3" colspan="2">Total Reimbursement: <input type="number" value="[webform_submission:values:total_reimbursement_01_total_reimbursement_]"></td>     </tr>     <tr>         <th>Destination: </th>         <td>[webform_submission:values:destination]</td>     </tr> </table> <br> <table>     <tr>         <th colspan="2">Beginning Mileage</th>         <th colspan="2">Endling Mileage</th>     </tr>     <tr>         <th>Location</th>         <th>OD Reading</th>         <th>Location</th>         <th>OD Reading</th>     </tr>     {% for distance in data.mileage_count %}     <tr>         <td>{{distanceinitial_location}}</td>         <td>{{distance.initial_od}}</td>         <td>{{distance.final_location}}</td>         <td>{{distance.final_od}}</td>     </tr>     {% endfor %}     <tr>         <th colspan="3">Total Traveled Mileage +/-</th>         <td>[webform_submission:values:item_total_01_traveled_mileage]</td>     </tr>     <tr>         <th colspan="3">Mileage Total</th>         <td>[webform_submission:values:mileage_total_01_mileage_total_]</td>     </tr> </table> <br> <table>     <tr>         <th colspan="7">Expense Items</th>     </tr>     <tr>         <th>Date</th>         <th>Type</th>         <th>Vendor</th>         <th>Attendees</th>         <th>Account Code</th>         <th>Rcpt</th>         <th>USD Amount</th>     </tr>     {% for cost in data.expense_items %}     <tr>         <td>{{ cost.date }}</td>         <td>{{ cost.type }}</td>         <td>{{ cost.vendor }}</td>         <td>{{ cost.attendees }}</td>         <td>{{ cost.acct_code }}</td>         <td><input type="checkbox"></td>         <td>{{ cost.amount }}</td>     </tr>     {% endfor %}     <tr>         <th colspan="6">Item Total:</th>         <td>[webform_submission:values:item_total_01_item_total_02]</td>     </tr> </table> <br> <table>     <tr>         <th>Traveler's Signature:</th>         <th>Director's Signature</th>     </tr>     <tr>         <td></td>         <td></td>     </tr>     <tr>         <th>Date:</th>         <th>Date:</th>     </tr>     <tr>         <td>[webform_submission:values:date]</td>         <td>[webform_submission:values:date_1]</td>     </tr> </table> 

This is my CSS code in settings CSS/JS

th {     background-color: rgba(38, 137, 13, 1);     border: 1px solid rgba(134, 188, 37, 1);     border-left: 1px solid rgba(134, 188, 37, 1);     border-bottom: 1px solid rgba(134, 188, 37, 1);     color: #ffffff;     text-align: center;     vertical-align: middle;     padding: .75em .5em;  }  td {     text-align: right;     border: 1px solid rgba(134, 188, 37, 1);     vertical-align: middle;     padding: .75em .5em;    }  table {     border-collapse: collapse;     border: 1px solid #fff;     empty-cells: show;     margin: 1%;  }