asked on

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

Kyle Hamilton

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.

kenfcamp

ASKER

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

kenfcamp

ASKER

It's a table, I just typed in the data format w/o the HTML portion

kenfcamp

ASKER

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>

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kyle Hamilton

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

Kyle Hamilton

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.

kenfcamp

ASKER

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