Table inside div has different margins to table outside div

[ChoccieMuffin]

Morning all

I have a peculiar one, and I'm not sure where to start fixing it.

I have a table, where all the cell contents are left-aligned. This is how I want it.

table not in div.png

For reasons I won't go into (to do with conditions from back in March) I need to put the table inside a div and apply a generic class to the div. But when I wrap the table in a div (even before applying the generic style) the content in the cells is no longer left-aligned, but has a bit of a margin (or padding? I never know!). I don't want this, I want the cell contents to be left-aligned inside their cells as before.

table in div.png

I haven't got any styling defined in my stylesheet for a div, and as you can see the styling for a table is fine when outside a div, so I don't quite know where to start. Can someone point me towards what I need to look at, in either my regular stylesheet or my table stylesheet, as I'm stuck! (And sadly, just saying "well don't put it in a div then"! is not a suitable answer - unfortunately the div is necessary for solving other problems.)

[MadcapMichelle]

Hi,

Styling the <tr> should fix this.

Highlight the <tr> tag, right-click and go to 'edit class'. On the Block options, set text-align to 'left'. Save and hopefully, that'll do it. If you only want that one table left aligned, it'll be worth creating a new class for it and then styling it left.

Best,

Michelle

[ChoccieMuffin]

Hi,

Styling the <tr> should fix this.

Highlight the <tr> tag, right-click and go to 'edit class'. On the Block options, set text-align to 'left'. Save and hopefully, that'll do it. If you only want that one table left aligned, it'll be worth creating a new class for it and then styling it left.

Best,

Michelle

That didn't work, because I'm using a table stylesheet, not the table styles in a regular stylesheet. The confusing thing is that it's fine until the table is wrapped in a div.

Any other ideas?

[cubreporter51]

Hi,

There is a fair chance that the

Code: Select all

<div>

is dictating the styling over your table style. There are a few things you could try:

1. Adding a ".divclass tr" (where divclass is the name your generic div class) entry to your CSS file where you set the text-align: left property and padding: 0.
2. In your table stylesheet, you could add "!important" next to your text-align and padding properties (not always the best practice, but it forces the CSS to use that styling, even if a parent level has a different style for that property).
3. Edit the div entry on your main style sheet to set the text-align and padding properties (this will affect every div regardless of class in your project, so not recommended, but worth a shot if everything else doesn't work.)

The style change once you wrapped it is a indicator the CSS properties are being inherited from the parent element.

[ChoccieMuffin]

Well I got an amazingly fast response from Tech Support with the following answer:

In my stylesheet I had set a complex selector div p which included a margin-left setting. I'd looked, but just couldn't find it. So even though I didn't have anything defined for a simple <div>, that complex selector caught me out. So with a very simple change to my stylesheet, my problem was solved!