CSV to html – Sticky header (fixed on scroll) and fixed left column

If you want to add a sticky header (when scrolled to top of screen header is fixed to top) to your table, you simply add header_type=”sticky”. If you also want to have fixed left column, you may add fixed_leftcol=”yes”.

Original

SR.	NAME	GENDER	AGE	DATE	COUNTRY
1	Dett2	Female	36	16/08/2020	Great Britain
2	Nern	Female	19	15/10/2017	France
3	Kallsie	Male	20	16/08/2016	France
4	Siuau	Female	21	21/05/2015	Great Britain
5	Shennice	Male	22	21/05/2016	France
6	Chasse	Female	23	15/10/2018	France
7	Tommye	Male	24	16/08/2017	United States
8	Dorcast	Female	25	21/05/2016	United States
9	Angelee	Male	26	21/05/2017	Great Britain
10	Willoom	Female	26	15/10/2019	France

Sticky header

Just scroll down and see how the header-row of tha table gets stuck on top of the screen.

Shortcode

[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" header_type="sticky"]

---

Sticky header

You may want the header-row to stick a bit down on the page. This could be required if you for example have a fixed header on your site. You simply add table_offset_header and give the intended offset from it’s parent.(If you only have have a table the browser the offset will be from the top position of the browser window).

Shortcode

[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" header_type="sticky" table_offset_header="200px"]

---

Sticky header – change backgroundcolor

The default headerbackgroundcolor is white. If you want to change background of the sticky header, you need to add header_backgroundcolor. This example shows a sticky header with red background color of the header.

Shortcode

[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" header_type="sticky" header_backgroundcolor="#ff0000"]

---

Sticky header with fixed left column- change backgroundcolor

The default background for the fixed left column is white. If you want to change background of this fixed colum n, you need to add header_backgroundcolor_left. This example shows a sticky header with red background color of the header and a black left column. Down below a larger version of previous file is used – just to show it looks when having more data.

Shortcode

[csvtohtml_create source_type="guess" source_files="Free_Test_Data_200KB_CSV-1.csv" header_type="sticky" fixed_leftcol="yes" header_backgroundcolor="#ff0000" header_backgroundcolor_left="#333" include_rows="1-20"]