Changing column and row headers in spreadsheet widget

I would like to be able to edit the text in the column and row headers in the spreadsheet widget.  It currently has letters for columns and numbers for rows.  

There is no option in the widget to replace the column headers and row numbers. A workaround would be to do it by a custom CSS codes.

For example, inject the following custom CSS codes in the widget to replace the text of Column A.

th#col_A {

    color: transparent !important;

}

th#col_A:before {

    content: "Love";

    color: #fff;

}

Then the following to replace the text of Row 1:

th#row_1 {

    color: transparent !important;

}

th#row_1:before {

    content: "Your Text";

    color: #fff;

}

Just repeat the same for the others, but make sure to replace the column letter and row number.  Note that you can group the CSS to make the text transparent in the Row Numbers and Column Letters. For example:

th#col_A,  th#row_1 {

    color: transparent !important;

}

Separate the ID selectors by comma and space or just comma. 

Let us know if you need further assistance. 

I forgot to add the guide, here's our guide on how to inject a custom CSS codes in the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets.