Change background color of the table heading in the Text element on PDF.

Hello, in the PDF editor for my form, I'm trying to create a table in a text box. When I add a background color to the cell, is there anyway to have that color actually fill the cell and not just highlight the text? I want to be able to fill the cell for the table headers and alternate row colors.

Hi Tom,

Thanks for reaching out to Jotform Support. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue. When I looked at your form, I saw that the table heading wasn't configured correctly. You added a span inside the table heading and a background color was added for the span. I added the background color of the table heading:

Is this how you want the table heading to show up? Let me show you how to fix it:

1. Click on the downward arrow on the top left corner of the page and then click on the PDF editor.
2. Select the Text element, and click on the Gear icon.
3. Click on the Source Code icon on the toolbar to open the source code editor.
4. Remove all the code that is added and paste the code given below:

<table style="width: 625px; margin-left: 30px;">

<tbody>

<tr>

<td style="width: 77px; text-align: center; background-color: #000000; color: #efefef;"><strong>INV</strong></td>

<td style="width: 67px; text-align: center; background-color: #000000; color: #efefef;"><strong>QTY</strong></td>

<td style="width: 346.75px; text-align: center; background-color: #000000; color: #efefef;"><strong>Description</strong></td>

<td style="width: 39.25px; text-align: center; background-color: #000000; color: #efefef;"><strong>Price</strong></td>

<td style="width: 55px; text-align: center; background-color: #000000; color: #efefef;"><strong>Total</strong></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;">{inv1}</td>

<td style="width: 67px; text-align: center;">{qty}</td>

<td style="width: 346.75px;">{description}</td>

<td style="width: 39.25px;">{price}</td>

<td style="width: 55px;">{typeA}</td>

</tr>

<tr>

<td style="width: 77px; text-align: center;">{inv}</td>

<td style="width: 67px; text-align: center;">{qty14}</td>

<td style="width: 346.75px;">{description15}</td>

<td style="width: 39.25px;">{price16}</td>

<td style="width: 55px;">{total2}</td>

</tr>

<tr>

<td style="width: 77px; text-align: center;">{inv20}</td>

<td style="width: 67px; text-align: center;">{qty21}</td>

<td style="width: 346.75px;">{description22}</td>

<td style="width: 39.25px;">{price23}</td>

<td style="width: 55px;">{total3}</td>

</tr>

<tr>

<td style="width: 77px; text-align: center;">{inv24}</td>

<td style="width: 67px; text-align: center;">{qty25}</td>

<td style="width: 346.75px;">{description26}</td>

<td style="width: 39.25px;">{price27}</td>

<td style="width: 55px;">{total4}</td>

</tr>

<tr>

<td style="width: 77px; text-align: center;">{inv28}</td>

<td style="width: 67px; text-align: center;">{qty29}</td>

<td style="width: 346.75px;">{description30}</td>

<td style="width: 39.25px;">{price31}</td>

<td style="width: 55px;">{total5}</td>

</tr>

<tr>

<td style="width: 77px;">&nbsp;</td>

<td style="width: 67px;">&nbsp;</td>

<td style="width: 346.75px;">&nbsp;</td>

<td style="width: 39.25px;">&nbsp;</td>

<td style="width: 55px;">&nbsp;</td>

</tr>

</tbody>

</table>

Give it a try and let us know how it goes.

That did the trick. Thank you Sidharth!

Sidharth, one more question on this. It appears that the span thing is by default. I didn't/don't know how to mess with the source code, but I added a final row to the table that calculates the total cost and wanted to fill the entire merged row, but it just highlighted the "Total:" text. What part of the course code do I need to remove to fix the spanning thing?

Hi Tom,

Do you want to expand and merge the label "Total" or the field "Grand Total" over the four columns in your table? It seems like the label is already merged over the 4 fields in your table but these changes were not saved in the email of your form.

Once we hear back from you, we'll be able to help you with this.

I've merged the first four columns of the table in the last cell for "Total:" but when I added background fill to the word "Total:" in the table, it just highlighted the word and didn't fill the cell. I want to have background color fill the cell in the table not just highlight the table.

Also, is there a way to have the table in the text box span the width of the PDF? I'm having some issues with larger prices and totals wrapping in the cell and making the row too wide. Can I widen the entire table to span the full width of the PDF then widen the Price and Total columns?

Hello Tom,

You can use the code below and paste it into the Source code of your Table to Highlight the last row and increase the width of the Table.

/* Highlight the Last row and Increase the width - 16380961  */

<table style="width: 690px; margin-left: 0px;">

<tbody>

<tr>

<td style="width: 77px; text-align: center; background-color: #000000; color: #efefef;"><strong>INV</strong></td>

<td style="width: 67px; text-align: center; background-color: #000000; color: #efefef;"><strong>QTY</strong></td>

<td style="width: 328px; text-align: center; background-color: #000000; color: #efefef;"><strong>Description</strong></td>

<td style="width: 63.125px; text-align: center; background-color: #000000; color: #efefef;"><strong>Price</strong></td>

<td style="width: 46.875px; text-align: center; background-color: #000000; color: #efefef;"><strong>Total</strong></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv1}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{typeA}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty14}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description15}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price16}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total2}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv20}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty21}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description22}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price23}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total3}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv24}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty25}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description26}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price27}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total4}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv28}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty29}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description30}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price31}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total5}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">&nbsp;{inv32}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty33}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description34}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price35}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total6}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv36}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty37}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description38}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price39}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total7}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv40}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty41}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description42}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price43}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total8}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv44}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty45}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description46}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price47}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total9}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv48}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty49}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description50}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price51}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total10}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv52}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty53}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description54}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price55}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total11}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv56}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty57}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description58}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price59}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total12}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv60}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty61}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description62}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price63}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total13}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv64}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty65}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description66}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price67}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total14}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv68}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty69}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description70}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price71}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total15}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv72}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty73}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description74}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price75}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total16}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv76}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty77}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description78}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price79}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total17}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv80}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty81}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description82}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price83}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total18}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv84}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty85}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description86}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price87}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total19}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv92}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty93}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description94}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price95}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total20}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv96}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty97}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description98}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price99}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total21}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv88}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty89}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description90}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price91}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total22}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv100}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty101}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description102}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price103}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total23}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center;"><span style="font-size: 9pt;">{inv104}</span></td>

<td style="width: 67px; text-align: center;"><span style="font-size: 9pt;">{qty105}</span></td>

<td style="width: 328px;"><span style="font-size: 9pt;">{description106}</span></td>

<td style="width: 63.125px; text-align: right;"><span style="font-size: 9pt;">{price107}</span></td>

<td style="width: 46.875px; text-align: right;"><span style="font-size: 9pt;">{total24}</span></td>

</tr>

<tr style="background-color: #b7b7b7;">

<td style="width: 535.125px; text-align: right;" colspan="4"><span style="font-size: 10pt;">&nbsp;&nbsp;&nbsp;<strong>Total:</strong></span></td>

<td style="width: 46.875px; background-color: white;"><span style="font-size: 10pt;">&nbsp;<span style="font-size: 9pt;">{grandtotal}</span></span></td>

</tr>

</tbody>

</table>



/* End code here */

Doing this will fix the issue on the background color of the last row and width of the Table. See the screenshot below:

Give it a try and let us know if you have any other questions.

Thanks Ronald. This works! Would it be possible to also add borders to the table cells that have data present in them?

Also, would it be possible to add commas to the total fields?

And also, what type of code is the source code? It would be cool if I could look into editing this stuff myself.

Hi Tom,

You can use the code below and paste it into the Source code of your Table to add borders on your table.

<table style="width: 690px; margin-left: 0px; border-collapse: collapse; border: 1px solid black;">

<tbody>

<tr>

<td style="width: 50px; text-align: center; background-color: #000000; color: #efefef; border: 1px solid black;"><strong>INV</strong></td>

<td style="width: 65px; text-align: center; background-color: #000000; color: #efefef; border: 1px solid black;"><strong>QTY</strong></td>

<td style="width: 325px; text-align: center; background-color: #000000; color: #efefef; border: 1px solid black;"><strong>Description</strong></td>

<td style="width: 70px; text-align: center; background-color: #000000; color: #efefef; border: 1px solid black;"><strong>Price</strong></td>

<td style="width: 75px; text-align: center; background-color: #000000; color: #efefef; border: 1px solid black;"><strong>Total</strong></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv1}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{typeA}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty14}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description15}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price16}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total2}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv20}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty21}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description22}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price23}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total3}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv24}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty25}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description26}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price27}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total4}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv28}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty29}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description30}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price31}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total5}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">&nbsp;{inv32}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty33}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description34}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price35}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total6}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv36}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty37}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description38}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price39}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total7}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv40}</span></td>

<td style="width: 67px; border: 1px solid black; text-align: center;"><span style="font-size: 9pt;">{qty41}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description42}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price43}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total8}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv44}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty45}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description46}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price47}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total9}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv48}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty49}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description50}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price51}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total10}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv52}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty53}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description54}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price55}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total11}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv56}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty57}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description58}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price59}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total12}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv60}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty61}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description62}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price63}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total13}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv64}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty65}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description66}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price67}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total14}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv68}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty69}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description70}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price71}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total15}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv72}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty73}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description74}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price75}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total16}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv76}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty77}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description78}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price79}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total17}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv80}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty81}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description82}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price83}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total18}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv84}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty85}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description86}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price87}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total19}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv92}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty93}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description94}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price95}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total20}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv96}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty97}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description98}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price99}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total21}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv88}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty89}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description90}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price91}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total22}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv100}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty101}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description102}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price103}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total23}</span></td>

</tr>

<tr>

<td style="width: 77px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{inv104}</span></td>

<td style="width: 67px; text-align: center; border: 1px solid black;"><span style="font-size: 9pt;">{qty105}</span></td>

<td style="width: 319.188px; border: 1px solid black;"><span style="font-size: 9pt;">{description106}</span></td>

<td style="width: 61.8125px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{price107}</span></td>

<td style="width: 55px; border: 1px solid black; text-align: right;"><span style="font-size: 9pt;">{total24}</span></td>

</tr>

<tr style="background-color: #b7b7b7;">

<td style="width: 525px; text-align: right; border: 1px solid black;" colspan="4"><span style="font-size: 10pt;">&nbsp;&nbsp;&nbsp;<strong>Total:</strong></span></td>

<td style="width: 55px; background-color: white; text-align: right; border: 1px solid black;"><span style="font-size: 10pt;">&nbsp;<span style="font-size: 9pt;">{grandtotal}</span></span></td>

</tr>

</tbody>

</table>

After injecting the codes that I provided, it should have the borders that you want. Please see screenshot below.

As for your other question, the codes that we are putting are CSS codes. If you want to learn more about CSS editing, you can check this website

Let us know if you have any more questions.