|
: CSS for a responsive table : jboylan January 26, 2015, 05:20:54 PM Hi, within the Zoka template, I would like to make a nice, simple, responsive table in an article, but I am having a heck of a time doing it. I found some references on Bootstrap examples, but it doesn't look like I can use that here. I tried a javascript solution from Zurb, and that didn't seem to work. I am not great with CSS from scratch, but I can copy and modify if I am given an example.
Here are my simple requirements: 1. Scale with screen 2. When too small, provide a scrollbar (or stack columns) 3. Alternating colored rows Any help would be greatly appreciated. : Re: CSS for a responsive table : mikenicoll January 26, 2015, 06:05:04 PM Hello,
I don't suggest using Tables anymore as they don't work properly with responsive design. Your best bet would be to create multiple inline divs with specific % widths attached to them. This will allow the divs and content to scale proportionate to the screen resolutions. : Re: CSS for a responsive table : jboylan January 28, 2015, 11:33:29 AM Ok, I started with your example of the pricing table and was able to get close to what I want. http://www.boylanpm.com/our-blog . But I have 2 outstanding issues:
1. It doesn't seem to be centering properly, almost like there are 6 columns. 2. Is there any way to get it to do a hover over the rows? Or is that not possible because it is oriented in columns? Thanks! : Re: CSS for a responsive table : mikenicoll January 28, 2015, 08:37:26 PM Hello,
1) Try wrapping the div with <center> </center> tags or removing the 80% width value. You can also try using margin: 0 auto; to center 2) Try this in the custom.css file : .s5_stattable_column:hover { |