-1

I have an HTML table which is 2-3 rows, various column count, generally from 4-8. The table can be placed into a container of various width; sometimes a fixed width (like a sidebar), and other times the width of the window.

What I would like to be able to do is change the orientation of the table if the container isn't large enough to hold the width of the table. I do not want the contents of the table to wrap.

So if Horizontal:

Date        Match 1   Match 2   Match 3   Match 4
1/6/2019     3-4       1-2       5-6       7-8
1/16/2019    1-7       4-6       3-5       2-8

Now if the window changes width and the contents of this table cannot fit, it should display:

Date       1/6  1/16
Match 1    3-4   1-7
Match 2    1-2   4-6
Match 3    5-6   3-5
Match 4    7-8   2-8

I've contemplated a number of ways to do this:

  • Flexbox (can't figure that one out for this situation)
  • Generate two tables, one is hidden, and have javascript determine if the table fits into the container width, and if not, flip the visibility of the table to show the vertical one
  • scrollable container and leave the table horizontal (I don't like that method at all)

What do you think the best way to solve this is?

LarryBud
  • 990
  • 9
  • 20
  • I would personally just generate two tables and use media queries to hide and show them. This would be the easiest and save you time trying to implement something in JavaScript. – Steven B. Jan 16 '19 at 17:55
  • Can't use media queries as the container width may change and since the number of columns may change, there's no hard and fast rule which says whether or not a table fits into a container. – LarryBud Jan 16 '19 at 18:01
  • try this. [https://stackoverflow.com/questions/41468762/change-orientation-to-vertical-table-rows-html-css](https://stackoverflow.com/questions/41468762/change-orientation-to-vertical-table-rows-html-css) Have a nice day! –  Jan 16 '19 at 18:06
  • Saw that. Which answer do you believe is correct? I need it to transform when the width of the table is greater than the container. – LarryBud Jan 17 '19 at 03:47

1 Answers1

0

What I ended up doing was creating two tables at the same time, a vertical and horizontal, default to horizontal. Then upon window resize, if the table container was wider than it's container, I would hide the horizontal and display the vertical.

This allowed the horizontal to be resized and cell contents wrapped until it would no longer fit.

LarryBud
  • 990
  • 9
  • 20