#1 November 11, 2014 3:10pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Styling tables in BigTree

I'd like to create a table with no padding. I've applied some style via the html (<table ... cellpadding="0"> and also via CSS (<td ... padding:0;>), but i'm still getting some padding in there.

I'm guessing there's a stylesheet I'm not seeing that's adding some padding to the tables. Can I override the default styles somehow?

Appreciate any help you can provide. :-)

Offline

#2 November 11, 2014 3:15pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

Are you referring to the admin area or the front end of the site?

Offline

#3 November 14, 2014 2:48pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

(Sorry - forgot to subscribe to this thread and just thought to check for a reply.)

I guess it would be the admin area.

For example, I'd like to create a table with no padding inside a flexible callout.

Offline

#4 November 14, 2014 4:11pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

Can you post a screen shot of the area you're talking about? I'm still not entirely clear.

Thanks1

Offline

#5 November 14, 2014 4:35pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

Here's the table in the callout editing window: http://grab.by/CdmA

Here's the code:
<table border="1" width="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: blue; color: white;">r1c1<img src="http://www.bowiestate.edu/files/resources/bar.gif" alt="" width="20" height="40" /></td>
<td style="background-color: red; color: white;">r1c2<img src="http://www.bowiestate.edu/files/resources/bar.gif" alt="" width="20" height="40" /></td>
</tr>
<tr>
<td style="background-color: green; color: white;">r2c1<img src="http://www.bowiestate.edu/files/resources/bar.gif" alt="" width="20" height="40" /></td>
<td style="background-color: yellow; color: black;">r2c2<img src="http://www.bowiestate.edu/files/resources/bar.gif" alt="" width="20" height="40" /></td>
</tr>
</tbody>
</table>

Here's how it renders: http://grab.by/CdmC

The green vertical stripe in each cell should meet the border if there's no padding, right? There seems to be a gap in each cell.

I might be missing something obvious, though.

Offline

#6 November 14, 2014 4:56pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

There are most likely styles in the front end of the site that change table rendering. Setting cellpadding=0 will always be overwritten by a CSS style that styles all td's with padding.

Offline

#7 November 14, 2014 5:06pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

Yeah, that's what I thought - there's a stylesheet I can't see styling the table.

If i set an inline style of padding:0px;  -- right in the table code itself -- would that work?

EDIT: nope. <td style="padding: 0px;">foo</td> seems to have no effect. wouldn't an inline style supercede an external style sheet? Is this one'a those !important CSS arguments?

Last edited by acutair (November 14, 2014 5:10pm)

Offline

#8 November 14, 2014 5:10pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

You would need to set style="padding:0;" on every td, not just the containing table.

Offline

#9 November 14, 2014 5:11pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

(See edit above - sorry for the crosspost.)

Offline

#10 November 14, 2014 5:15pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

If you can send me a public URL I can let you know. Normally inline should supersede any non !important styles.

Offline

#11 November 14, 2014 5:30pm

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

Here ya go: http://www.bowiestate.edu/test-2/

I'm out for the weekend, but I'll check back next week. Thanks for your help and have a great weekend.

Offline

#12 November 14, 2014 5:37pm

timbuckingham
Administrator
From: Baltimore, MD
Registered: April 2, 2012
Posts: 949

Re: Styling tables in BigTree

Looks like two things:
- The images in are getting a 5px top margin from the ".callout img" CSS rule
- The images aren't block so the <td> renders with some space below the image. Set a style="margin: 0; display: block;" on each of the images and you should get your desired effect.

Offline

#13 November 17, 2014 8:25am

acutair
Member
Registered: November 5, 2014
Posts: 27

Re: Styling tables in BigTree

ah, brilliant - thanks!

Offline

#14 June 10, 2015 1:07am

yanmercal
Member
Registered: June 10, 2015
Posts: 1

Re: Styling tables in BigTree

More about .....CSS Styling Table

Mercal

Offline

Board footer

Powered by FluxBB

The Discussion Forum is not available on displays of this size.