Well....if you care about old - out of date - renderers....
You'll have to use old - out of date - techniques....
You wont be able to exactly fill the remainder of the cell with perfectly spaced periods in all cases with a single template. The OP asked how to do that, I showed him/her...
Have you tested the technique on your targeted devices? Devices can, and do, implement functionality that is not yet fully endorsed by the IDPF... Any
compliant renderer is required to gracefully degrade on an unknown or incorrect css. If it ignores the entire css then that is a bug and should be reported as such. A non-css3 renderer should likewise skip over the css3 ...
In any case, the rest of the code works fine. You will just need to manually add an approximate number of periods to fill out the remaining width of the first column for each ingredient.
...or maybe Jon can recommend an alternative code....??