Forum Support

Shape 5
March 28, 2024, 05:30:12 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: CSS for a responsive table  (Read 434 times)
jboylan
Jr. Member
**
Offline Offline

Posts: 88



« on: 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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: 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.

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
jboylan
Jr. Member
**
Offline Offline

Posts: 88



« Reply #2 on: 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!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: 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

Code:
.s5_stattable_column:hover {
  background: #ff0000;}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.