JavaScript中的自动表格布局策略？

Question

Mozilla have their auto table layout algorithm available:

https://developer.mozilla.org/en/docs/Table_Layout_Strategy

Has anyone ever seen a similar implementation in a JavaScript library?

What I'm wanting to do is take tabular JSON data and calculate appropriate column widths in a similar manner to what HTML's auto table layout is doing. I'm not interested in tricks like letting the browser do the layout, then looking at widths etc, I'm wanting to perform the calculation in JS from raw data.

Answer 1

You cannot measure the width of text content without first rendering it to screen (because you have to contend with different screen resolutions, user font settings, etc etc etc).

There is one exception though, but its not entirely accurate. The canvas element has the ability to measure text dimensions , but in my experience it isn't precisely accurate and thusly not worth the trouble/overhead of pre-rendering all of your content to get a less-than-accurate reading.

Some other cheap tricks involve explicitly setting the size and font of the content to a predictable-width-mono-spaced-character-font and then counting the number of characters in the string...but that falls apart quickly in scenarios where the content line-feeds/wraps to fit inside a container. You could also "pre-render" your text into a hidden container in the DOM (think display: hidden or z-index:-999) and get a container measurement that way, but more often than not that devolves into a ton of per-column logic that becomes unwieldy a few requirement changes down the road.