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

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.

table1.png1008×523 240 KB

table2.png358×534 81.2 KB

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

2 Likes
3

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

1 Like
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