Discussion Forum

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. :-)

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

Re: Styling tables in BigTree

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

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.

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

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

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.

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

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.

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)

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

Re: Styling tables in BigTree

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

acutair

Member

Registered: November 5, 2014

Posts: 27

Re: Styling tables in BigTree

(See edit above - sorry for the crosspost.)

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

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.

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.

timbuckingham

Administrator

From: Baltimore, MD

Registered: April 2, 2012

Posts: 978

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.

acutair

Member

Registered: November 5, 2014

Posts: 27

Re: Styling tables in BigTree

ah, brilliant - thanks!

yanmercal

Member

Registered: June 10, 2015

Posts: 1

Re: Styling tables in BigTree

More about .....CSS Styling Table

Mercal