css responsive table

I'm upgrading our website to be mobile compatible using responsive design and have run into a snag.

We have a 3 column table
[example]
<B>Beverages</B>    <B>Sandwiches</B>       <B>Cookies<B>
       Soda                           Tuna                               Oreo
       Water                         Bologna                          Chocolate Chip
       Tea                             Ham & Swiss                  Oatmeal
       etc                              etc                                   etc

When the page is viewed by a small screen I'm trying to get the table to display like
[example]
<B>Beverages</B>
       Soda
       Water
       Tea

<B>Sandwiches</B>
       Tuna
       Bologna
       Ham & Swiss

<B>Cookies</B>
       Oreo
       Chocolate Chip
       Oatmeal

I've viewed countless tutorials, demo's, samples, etc but they all work with data from left to right
(Most recently - https://css-tricks.com/responsive-data-tables/)

Any help would be greatly appreciated

Ken
LVL 14
kenfcampAsked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
a table is an object with rows and columns. where each row is an object having the properties defined by each column. . so unless each row in your dataset represents a discrete object, it is not actually a table. i'm not saying this to make you feel bad, i'm trying to help define the data and come up with the most appropriate solution. so what you have are 3 columns. this is actually a good thing. much easier to think about. did you try the list suggestion?
0
 
Kyle HamiltonData ScientistCommented:
your data isnt really a table anyway, so i woulnd use table elements to start with. what you have are three columns side by side. use lists and either float then left, or display inline. then at a certain view port width, remove the float, or set to display block.
0
 
kenfcampAuthor Commented:
Actually, now that I think about it space wise
Something like the following might work better

[col1]                              [col2]
                                        Soda
<B>Beverages</B>         Water
                                        Tea
     
                                        Tuna
<B>Sandwiches</B>      Bologna
                                        Ham & Cheese  

                                        Oreo
<B>Cookies</B>             Chocolate Chip
                                        Oatmeal
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
kenfcampAuthor Commented:
It's a table, I just typed in the data format w/o the HTML portion
0
 
kenfcampAuthor Commented:
Here's the sample data in table format

<table>
<thead>
<tr>
<th><b>Beverages</b></th>
<th><b>Sandwiches</b></th>
<th><b>Cookies</b></th>
</tr>
</thead>
<tbody>
<tr>
<td>Soda</td>
<td>Tuna</td>
<td>Oreo</td>
</tr>
<tr>
<td>Water</td>
<td>Bologna</td>
<td>Chocolate Chip</td>
</tr>
<tr>
<td>Tea</td>
<td>Ham & Swiss</td>
<td>Oatmeal</td>
</tr>
</tbody>
</table>
0
 
Kyle HamiltonData ScientistCommented:
sorry, just saw your post. however, even though you are displaying the data using an html table, it is still not a table. the table is being used for layout purposes only. in modern web dev, that's a no-no
0
 
Kyle HamiltonData ScientistCommented:
of course I could be wrong :)

is "Soda, Tuna, and Oreo" a meal? is it a table of meals, where each row is a meal? then I'm wrong, and you do actually have a table.

Otherwise you have three lists.

Cheers.
0
 
kenfcampAuthor Commented:
Ended up going a different route.
The list suggestion wouldn't work for what I'm working with, however the suggestion did give me an idea I hadn't thought of :)

Thanks for the help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.