Stupid mistake with table/list...is it fixable?

Stupid mistake with table/list...is it fixable?
0.0 0

#1

Hello everyone

I have a project going on and one of the things that needed to go on the website was a price list.
Now I have made the mistake of making it as a table. I worked on it for a long time as I wanted it do some nice tricks. After I was happy that all is working I came to the conclusion that it is horrible on mobile version and I should have used lists… I’m a bit afraid to touch it now it finally works.

So my question is… Does anyone have any idea how to make it responsive? or Do I need to convert it to a list? ( yes I have googled)

Thank you very much in advanced!


#2

Here’s one technique I’ve used.

On a desktop browser, the table will be displayed as 3 columns.
But on a mobile phone, the table is displayed as 1 column.

The trick I’m using is I’m hiding columns 2 and 3 via “hidden-xs” bootstrap.
Then I repeat the data/info in columns 2 and 3 in column1, but they’re only visible in mobile via “visible-xs”

<table class="table table-bordered table-striped table-hover" width="100%">
<tr>
   <td> this is first column 
       <span class="visible-xs">
             Data2222<br>
             Data3333
       </span>
   </td>
   <td class="hidden-xs">Data2222</td>
   <td class="hidden-xs">Data3333</td>
</tr>
...
...
...

</table>

Now, my table is populated from a database (via angular) so it’s fairly easy to create this layout and duplicate the content.

Cons: Duplication of data content.

I might add that the table columns are sortable ascending/descending, and also filterable.


#3

Thank you so much!!! It’s working prefectly.
You have no clue how gratefull I am!


#4

I found the following and it does not involve repeating the data on page load.

https://css-tricks.com/examples/ResponsiveTables/responsive.php


#5

Another common option is to wrap the table in an element that has overflow-x: scroll set on it in a media query for mobile. This isn’t super duper usable by any means, but it means the table will at least work on mobile. It’s not a great solution, but it’s maybe ok as a quick fix.

Best cross-platform option is flexbox and/or css grid with media queries; tables were not designed when mobile sites were a thing as you’re finding out