CSV to html – Fixed header and columns

If you want to add a fixed header you need to add an attribute header_type=”fixed”. For this to have any visual effect you need to have a fixed height (table_height).

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

Fixed header

Scroll up and down in the table below you would see that the header -row is fixed. If you don’t specify any value for the table height it would be in pixels (so table height below is 400 pixels). Possible values for table_height are %, vh, px, em, rem.

Shortcode

[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" header_type="fixed" table_height="400"]

---

Fixed left column

If you want to combine fixed headers with a fixed left column you could also set fixed_leftcol to yes. It’s also possible to define a table width with table_width (else it would not make sense with fixed left column). Possible values for table_width are %, vw, px, em, rem. You need to set the table width smaller than it’s parent else it would not be horisontal scroll and then there would be no need for fixed left column.

Shortcode

[csvtohtml_create source_type="guess" source_files="free_testdata_10rows.csv" header_type="fixed" fixed_leftcol="yes" table_height="400" table_width="50%" header_backgroundcolor_left="blue"]