[Resolved] Change the orientation of a table view

[Author]

Posts

[lesleyA]

Tell us what you are trying to do?
I currently have a view to show fields in a repeatable group. Toolset have kindly helped me set it up and it looks like this:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="table-responsive">
<table width="100%" class="table">
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
<td class="logo-cell">[types field='logo-image' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</td>
<td class="wide-cell">[types field='col-1'][/types]</td>
<td>[types field='col-2'][/types]</td>
<td>[types field='col-3'][/types]</td>
<td>[types field='col-4'][/types]</td>
<td>[types field='col-5'][/types]</td>
<td>[types field='col-6'][/types]</td>
<td>[types field='col-7'][/types]</td>
<td>[types field='col-8'][/types]</td>
<td>[types field='col-9'][/types]</td>
</tr>
</wpv-loop>
</tbody>
</table>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

It works perfectly well, but I now have a request to globally change the orientation of the table so that rows become columns and columns become rows.

I figure that I could most likely change the view to this:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="table-responsive">
<table width="100%" class="table">
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
<td class="logo-cell">[types field='logo-image' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</td>
</tr><tr>
<td class="wide-cell">[types field='col-1'][/types]</td>
</tr><tr>
<td>[types field='col-2'][/types]</td>
</tr><tr>
<td>[types field='col-3'][/types]</td>
</tr><tr>
<td>[types field='col-4'][/types]</td>
</tr><tr>
<td>[types field='col-5'][/types]</td>
</tr><tr>
<td>[types field='col-6'][/types]</td>
</tr><tr>
<td>[types field='col-7'][/types]</td>
</tr><tr>
<td>[types field='col-8'][/types]</td>
</tr><tr>
<td>[types field='col-9'][/types]</td>
</tr>
</wpv-loop>
</tbody>
</table>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

This doesn't work and the view shows table cells which stacked on top of each other, as per the image attached.

Of course, what I'm hoping is that we don't have to input all the table data again!

What is the link to your site?

[Minesh]

Hello. Thank you for contacting the Toolset support.

There is no such feature available to convert table columns to rows but there could be some workaround available either using CSS or Javascript that you would like to try.

Please note that this will be custom code and we do not take any ownership that if it will work without any issue its on you if you want to use it or not.

Please check the following related links:
- https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table
- hidden link
- hidden link