5

Is there a semantic CSS or HTML property/attribute to show a table with rows & columns swapped?

In other words, I would like to write the code one way, but have something that flips the rows with columns, and vice versa.

Looking around, I only found JavaScript ways to swap them, but in my case — that's not what I'm looking for. (If there isn't a CSS/HTML solution, then I would rather refactor the code.)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
o0'.
  • 11,739
  • 19
  • 60
  • 87
  • Possible duplicate of [How to invert (transpose) the rows and columns of an HTML table?](https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table) – Brian Tompsett - 汤莱恩 Dec 03 '18 at 13:46

4 Answers4

3

I understand your concern, but at present, the answer is no:

There is no clean way to do it with HTML and CSS alone. (Although rotating the table's cells 90° is definitely interesting.)


This situation has a few options, as you suggested yourself:

  1. Refactoring your code (e.g. recoding the table manually, with a script/automation, or doing it in Google Docs spreadsheet and exporting as HTML — used to be possible a few years ago.)

  2. Either using JavaScript to do the switch if you don't want to refactor; or using JavaScript as a function to switch back the refactored code — just in case you're looking to have a button on your site that says, "Flip Table".

  3. Trying the proposed and experimental method of rotating the cells with CSS.

It will depend on what you want and the specifics of your implementation. I would say that progressively-enhanced JaveScript is clean code in most people's books (but in this case, it wouldn't degrade gracefully because people who visit without JS would see the original HTML table). Search engines will pick up JS as well.

Community
  • 1
  • 1
Baumr
  • 6,124
  • 14
  • 37
  • 63
3

Sorry, but no there isn't.

You might be to achieve something close by rotating the whole table by 90 degrees, and then rotating the cells by 90 degrees the opposite direction. You'd probably also need to manually set the height and width of all the elements to make it look sensible.

That would be a major hack, though; I really wouldn't recommend it.

There aren't any other CSS solutions to this; certainly not a "standard" one. It's not exactly a standard thing to want to do.

SDC
  • 14,192
  • 2
  • 35
  • 48
3

But there ARE in fact at least two different CSS solutions.

There is this solution by David Bushell (using flexbox): http://dbushell.com/2016/03/04/css-only-responsive-tables/

And this solution (using float)

tr { display: block; float: left; }
th, td { display: block; }

http://jsfiddle.net/XKnKL/3/

rosell.dk
  • 2,228
  • 25
  • 15
2

Not that I'm aware of. Looks like you want to do something like this:

How to invert (transpose) the rows and columns of an HTML table?

Community
  • 1
  • 1
tahdhaze09
  • 2,220
  • 1
  • 21
  • 36