How can I make a table responsive?

User 188640 Photo


Registered User
895 posts

Been a while since I've been in here. I have a couple of older websites that I'm converting to responsive. I'm going to try building the layouts in RLMP and importing them into RSD.

'ALL' of these sites are built with 15 to 18 year old code and a lot of tables. I don't have any problems converting most of the tables to divs but the first one I'm doing (1 page site) has a menu built in a table with 8 rows and varying columns per row. Of course some have different heights.

What's the best way to format this mess? I'm attaching a picture of what I have to work with.

Any suggestions are appreciated,

Ernie
Attachments:
A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,188 posts

It's up to you. How do you want it to look on smaller screens?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 188640 Photo


Registered User
895 posts

Hi Eric,

I know the owner is probably going to want it to look just like it does on a full screen but we all know that's not going to happen.

I'm thinking on the small screen: loose the image and stack all the columns, the heading first then the days and then the rest of the rows will just follow (adjusted for text layout and size).

I just haven't ever done stacking before and I'm not sure what the best way to start would be.

Thanks for any suggestions.

It may be tomorrow morning before I get back in here, I have a yellow jacket nest under our stairs that I will be dealing with after dark and I need to get that fixed. The wife is allergic and I hate the stings, they hurt.

Ernie
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,450 posts

Hi Ernie,
I think it would be easier to give a qualified answer if we could see the whole page. Not necessary in code in this case, but at least an image.
Some of the things you have in that nav system now don't necessarily have to be included in the nav. For the day menus, they might perhaps be placed in dropdowns under each day.

Good luck with the wasps!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
895 posts

Inger,

Actually there are no nav links on the page. They have a one page website so no menus to work with.

Only a couple of links, on that opens a new window for their contact form and one attribution link.

I worked on this yesterday but I decided to do it in RSD to get a feel for how that works. I have a couple of formatting issues but I'm going to post that in the RSD section of the forum.

If you want to see the 'site' here's a link to the live site: http://harborlightsrestaurant.com

Here's what I've done so far in RSD: http://mytestblog.net/harbor/

I think I got all the wasps taken care of Saturday night. I'll give it a couple of days then put my bee suit back on and tear out the nest.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,450 posts

Yeah, I was thinking along the same lines. But if I were you, I wouldn't hide the two images (beacon and orange fisherman) completely. How about in the header hide one of the images, then let the other one slide on top of the heading when the screen gets smaller. Someting similar with the beacon; let the table go below it, and you can increase the %-age of the image width when it all becomes one column. Just some thoughts, for starters... ;)

(So you have a bee suit? Have you also got bees? I have, as you can see.)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.