Is there a CSS / HTML property / attribute that can change tables and table columns?
Is there a semantic CSS / HTML property / attribute to show table
with row and column replacements?
In other words, I would like to write code one way, but have something that flips rows by columns, and vice versa.
Looking around, I only found JavaScript ways to change them, but in my case, this is not what I'm looking for. (Unless there is a CSS / HTML solution, I would rather refactor the code.)
source to share
Not that I know. It sounds like you want to do something like this:
How to invert (transpose) rows and columns of an HTML table?
source to share
I understand your concern, but the current answer is no:
There is no clean way to do this with just HTML and CSS. (Although rotating the table cells 90 ° is certainly interesting.)
In this situation, there are several options, as you yourself suggested:
-
Refactoring your code (such as manually recoding the spreadsheet using script / automation, or adding it to a Google Docs spreadsheet and exporting as HTML) that were available a few years ago.)
-
Or use JavaScript to switch if you don't want to refactor; or use JavaScript as a function to return the refactored code - just in case you want your site to have a button that says
"Flip Table"
. -
An attempt at a suggested and experimental method for rotating cells using CSS.
This will depend on what you want and the specifics of your implementation. I'd say progressive JaveScript is clean code in most books for people (but it won't degrade gracefully in that case because people who visit without JS will see the original HTML table). Search engines will also get JS.
source to share
Sorry but no.
You could achieve something close by rotating the entire table 90 degrees and then rotating the cells 90 degrees in the opposite direction. You will probably also need to manually set the height and width of all elements to make them look sane.
This would be a serious hack; I would not recommend it.
There are no other CSS solutions for this; certainly not "standard". This is not really a standard thing to do.
source to share
But there are actually at least two different CSS solutions.
This is David Bushell's solution (using flexbox): http://dbushell.com/2016/03/04/css-only-responsive-tables/
And this is the solution (using float)
tr { display: block; float: left; }
th, td { display: block; }
source to share