Is there way to render <table> horizontally when the list exceeds certain length?

Question

I created a visualization with d3 http://jbk1109.github.io/tennisMapWithPlayersListOnHover.html

When mouse hovers over the histogram, a list appears underneath. There are a couple cases when the list becomes too long and I would like the table to grow horizontally beyond certain length.

Is there an optimal way to do this other than checking the length of list and appending a new table element?

Answer 1

Nice job Brian! I would try to get viewport height with jQuery, and compare it witch table height, something like:

if(table_height > viewport_height) {
    // change table css style to 2 column table
}