Matthew, it appears the Text Formula does not like the percent (%) symbol and there doesn’t seem to be a means around it within Knack (what is referred to as escaping special characters).
I didn’t want to over complicate the solution for you, but you really have a couple options to tackle the problem:
1) Adjust all your columns to use Pixel widths (px) instead of Percent (%).
The challenge with this approach is that it will always be a fixed width irrespective of screen / browser width. Your formula would need to be adjusted as follows:
2) Rather use the CSS Styles under Knack’s custom code. (Best & Cleanest Solution)
This was going to be my initial suggestion when responding to this topic, but I did not overcomplicate this for you. That said, this is by far the cleanest approach as it keeps the formatting out of your formulas, making it easier to maintain going forward (and to change a color, alignment, etc you can just adjust the CSS and all references are adjusted across your project).
To do this, your formula needs to change as follows:
Note the table attribute called “class” that is set to “mytable”. Here you can use any name, just make sure its unique and logical for you. I personally like to include my project name in my CSS class names e.g. “myproject-product-table”.
This would allow you to identify that HTML element throughout the full HTML code on a page and to style any HTML element with that tag (and this is why it should be unique). Further to this I removed your Font HTML elements, as I am going to demonstrate how to do this in CSS and keep your formula lean (and clean).
This is where it may get a little more tricky, but to style that element you head over to your Knack Builder’s Settings > API & Code > CSS page and enter the following:
To explain this CSS code:
- what you will notice in the CSS is the Class is identified by placing a full-stop in front of the element. That will allow the browser to find all TABLE elements with class that is “mytable”, so in this instances its “.mytable”
- Hereafter, if you include TR and TD elements after your class name, it will find the HTML children elements below that class, allowing my to access the columns and rows of your table.
- And finally, to access specifically the 1st, 2nd, 3rd columns, you can use the “:nth-child(x)” where x is replaced by the column number you wish to reference.
Really hope one of these approaches works for you.