Community Forums › Forums › Archived Forums › Design Tips and Tricks › Table Styles and Margin
- This topic has 5 replies, 2 voices, and was last updated 9 years, 8 months ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
August 6, 2014 at 3:52 pm #117446keyelementmediaMember
I'd like to have a table with 3 columns and 2 rows, which I have here: http://zanatas.keyelementmedia.com/
The bottom TD's don't seem to have the padding or margin on the sides like the top row. I've tried several things, but it seems maybe the table styles of the Lifestyle Pro theme is doing something that I'm not intending.
I'd also like the bottom row to be up with a 3px gap next to the top row....currently it has a large gap between the two. The 3px gap is what I have set between the TD's currently.
And I'd also like the border around the table to be spaced 3px away from everything, so I'd end up with an evenly spaced piece.
I also can't seem to get the table to be centered.
The styles that pertain to the table that I've created are all at the top of the style sheet, I think they start on line 149.
Thank you
Thank you, Jared
August 6, 2014 at 4:22 pm #117449Lauren @ OnceCoupledMember- The two rows do have the same margins and padding. It just doesn't look like it because of the background color you're applying (which covers padding - change that to 0 and you'll see the top flush with the sides, just like the bottom) as well as the image:
- The large gap is caused by the images. They're inline elements, but you can change these to block-level and fix it:
td img { display: block; }
- So you want a dark border, around a 3px white border?
- Block on line 156: you were on the right track with
margin: 3px auto;
but the line below it over writes that for any browser supporting rems. You need to change both lines:margin: 0.3rem auto;
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
August 6, 2014 at 7:14 pm #117477keyelementmediaMemberGetting closer, thanks for the help. I removed the table border and just put a div around the table with a border, which seems to be easier.
The main issue now is the bottom TD's don't seem to have the same spacing as the images. They appear to be missing a pixel or two. The white lines are thinner between the bottom TD's.
I wonder if it would be easier to but a DIV within the TD, display block and have it fill in the background that way?
Thank you
Thank you, Jared
August 7, 2014 at 9:48 am #117587Lauren @ OnceCoupledMemberAgain, that spacing is a result of the padding - background color covers that space while an image doesn't. Change that to 0.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
August 8, 2014 at 8:50 am #117756keyelementmediaMemberI took the padding and margin out, which allowed the spacing to be consistent.
Thank you
Thank you, Jared
August 8, 2014 at 8:56 am #117758Lauren @ OnceCoupledMemberGlad it's looking the way you want. 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The topic ‘Table Styles and Margin’ is closed to new replies.