Unresponsive Table

I've created a Rates Table that does not seem to readjust.. The first column is much wider than it needs to be, how to I get the column width adjustment to react? Also are Tables just not "responsive" ? Where is it best to make tables responsive... having a hard time with this conceptually as tables are inherently not really responsive. What happens, the text in a Cell wraps?

The example would be here, under Rates Tab. http://spring-resonance-9636.bss.design/

I did check "Responsive" in Options when selecting TABLE under Overview. Don't know what changed.

To get things setup right, if those last two columns will not be used, remove them so they don't take up excess space. If they will, stick some bogus info in there (Lorem Ipsem works well for that) so that they will be filled to a degree so you can measure things out better.

From there I give the cells of the first row (before I create more rows) classes that describe them. Then I give them widths in percentages according to the amount of space the column they are in will need to take up, so they will adjust always all the way to phone view. Then I duplicate the row to make the new ones and they have the classes in them automatically so I don't have to keep copying and pasting from row to row for settings, only content.

It will make a difference what type of content you use as to whether or not it will end up with a horizontal bar at the bottom or not. I am using a table for audio files using the HTML5 audio tags setup, and they don't seem to be "responsive" so I end up with a horizontal bar for phone size, but the client is ok with that. If I find a solution at some point I'll change it out or add it etc., but for now it works.

The main thing is to assign your columns a specific percentage width so it stays responsive for the most part.

P.S. If anyone else has any better suggestions I'm all eyes lol.

Jo, I learned some things tonight. Yes I did remove the two columns on the right first.

  1. This would have been a good idea for starting fresh.. Then I duplicate the row to make the new ones and they have the classes in them automatically so I don’t have to keep copying and pasting from row to row for settings, only content. --I just typed all the classes in by hand, using the HTML Attributes Editor.

  2. I seemed to be missing the <Table Row> above the <Table Body> and something else was missing because I pulled a new table out from COMPONENTS, and put it inside <container> <row> <column> <<-------

<

table> and when I pushed the browser wide to narrow, this table reacted well. So I had to redo my table that had been screwed up. -- To do this I simply pulled each <Row> under the <Table Body> down to the new one adding them in order. This table had a <Table Header> with a <Table Row> and I completed that information. I tried it and it worked! No need for % sizing CSS. --Next I had to move this table up to under the second TAB, so I grabbed the parent <Row> labeled Rates out of the <Container> and pulled it up under the TAB #2 . Then I deleted what remained of the old table. I tried resizing the screen. It did not work. -- I realized that I had an "Additional Info" smaller table below the main table that was basically text in one column that was screwing things up all along. So I moved that out of the <row> <column>

<

table> and put it into a new <row><column> <Heading> then Paragraph, paragraph,, etc. and cut and pasted the text in that "Additonal Info" into this heading and paragraphs. --- Then I saved the changes and previewed in the browser, and low and behold it scales nicely.

Thank you for your help. I may try adding the % later in CSS when I get more used to this, but for now its good. There are other things to fix.

Once again it sounds like you're doing well in trial and error. I learn quite well that way myself, but as you said trial and error does lead to a lot of work that you realize could have been saved if only you had done ..... to start with lol. We won't forget those lessons though will we!?! haha.

Don't forget also to always check your options pane to see if there are any settings there, which there are for tables, mostly just for the top level table tag. These will give you lots of options for visuals, but of course I had to still finagle a bunch of things to get rid of a lot of the borders even though the setting for borders is there, it doesn't mean "all" borders I guess.

Keep up the good work, you're doing better every day!

Don’t forget also to always check your options pane to see if there are any settings there, which there are for tables, mostly just for the top level table tag. These will give you lots of options for visuals, but of course I had to still finagle a bunch of things to get rid of a lot of the borders even though the setting for borders is there, it doesn’t mean “all” borders I guess.

Great advice, I'd have it as one of the first things for new beginners! Would save time.