Style a table using CSS (provided) for on a Google Site (uses Google Apps Script & Awesome Tables)

Hi Freelancers,

I need a table styling with CSS and can pay up to 25 EUR - I have included the CSS and details below...

I used Google Apps Script and "Awesome Tables" with Google Sheets to make a membership directory for a rugby club. The directory works well and now it just needs the tables styling nicely.

To the existing table i’d like to add a fixed header row at the top of the X axis (Column titles) and a fixed column on left of the Y axis (Player name).

These fixed rows will make it more readable when users scroll left, right up and down in the table - the table has about 25 columns and 500+ rows.

The end result should look and work like this CSS table tutorial for “Sticky Headers":

[login to view URL]

[login to view URL]

*Important*

We need to keep the same column headers used at the moment.

We need to keep the same filters used at the moment.

We need to keep the modal pop up feature when clicking on a player.

Attached:

- PDF showing this info again including 2 screenshots of how it looks currently:

1. Table view with filters - this is what needs improving.

2. Modal Pop up when row is clicked.

- zip of the CSS demos linked above.

Awesome Tables: [login to view URL]

Copy of the Google Sheet used by Awesome tables to create the directory including 20 rows of sample data, the HTML and CSS:

[login to view URL]

TL:DR - the job is to re-style the table created by HTML and CSS on the below "Template" tab so it has a sticky header and left column:

https://docs.google.com/spreadsheets/d/14BIyJsURqCXrhmwIsudrW1pqWKYcc3_OjM5yNqTkwB8/edit#gid=1749608007

Please let me know if you have any questions!

CSS HMLT5 JavaScript

Projekt ID: #11750042

Om projektet