Table Heading Orientation

API & Customization
1

I have a lot of headings to add to a table with the results being a single character. On Excel I have the headings set to 90 degree rotation and the column with to 3 - this enables me to have a lot of columns without using all the space.

How can I rotate the headings of the tables ?

Example:

 I have found this CSS resource but don't know how to implement in Knack :
https://css-tricks.com/rotated-table-column-headers/ 

2

I did have this working in the old Knack builder but stopped working in new. I will try and dig out the old code and see if someone can do their magic on it.

Peter

3

Sam would be interested if you found some magic to make this work!

4

Has anyone made this work? I haven't spent much time on it yet, thought I would check with the community first before re-inventing the wheel. Thanks in advance!

5

Hi Catherine,

Knack tables do utilize the th tag for table headers, so the code from the link you provided might work with some modification.

You can target scenes (pages) and views (like a table) with ID selectors. To find ID selectors, go to your Builder and navigate to the page or view you are trying to target, then look at the full URL in your browser’s navigation bar. For a view, like a table, it should look similar to this :


In this example, the ID selector for the page itself is scene_2, and the table itself is view_4, which is what would be used in the CSS to target just that table.

 

If implementing CSS is something you would like to experiment with, you can find help for adding custom CSS to your Live App in our Developer Documentation. It covers everything from where to add the code to finding the right CSS selectors.

Although experimenting with CSS is typically safe, it is still recommended that you make a copy of your app to experiment with, especially if you already have users for your Live App. Any changes you were making, they would be seeing.

 

When it comes to general support for adding custom code, the Knack team is happy to help with general questions, and can be reached at support@knack.com.

Support for the writing and troubleshooting of custom code is outside our scope. For questions of that nature, please post again. If that doesn’t get you the specific help you need, you can always try reaching out to the Builder Network.

 

Thanks for the great question!

Krystel.