Where to set cell padding - Table Styles or regular CSS?

[hjohnson]

Hi All -

If I set the cell padding in my Table Style sheet, it looks great on the table rows, but not the header. The header is set to Center, but with cell padding on both the right and left, the header text pushes slightly to the right. If I remove the cell padding, the header centers, but the table row text is hugging the left wall of the cell. I tried to adjust the padding in the <td> tag of the normal stylesheet, but the Table Style sheet overrides those settings.

Does anyone know how to control the balance between the two? The alternative is to make sure that each line of text has a <p> tag attached to it, which will control the padding just fine.

Helen@Block

[hjohnson]

I figured it out! I opened the Table Style sheet in my text editor and set the padding in all of the Body row settings.

I love how this forum helps me to help myself.



Helen@Block

[hjohnson]

Nevermind - this didn't work after all.

If I add padding to the cell, then anything I type in the <td> tag lines up correctly, but as soon as I do a carriage return in the cell, everything goes to a <p> tag, and it adds the <td> padding to the <p> padding, and so everything is still skewed if I have a mix of content in both <td> and <p>. So, I guess my solution is to remove cell padding from the table, and make a rule that all table content has to have a <p> tag attached to it.

Helen@Block

[LTinker68]

... and it adds the <td> padding to the <p> padding, and so everything is still skewed if I have a mix of content in both <td> and <p>. So, I guess my solution is to remove cell padding from the table, and make a rule that all table content has to have a <p> tag attached to it.

Or create a complex selector. That'll essentially say that if you have a <p> tag inside a <td> tag, then apply this amount of padding to the <p> tag. So your stylesheet would look something like this (only the relevant styles are displayed):

Code: Select all

td 
{
  padding: 4px;
}

td p 
{
  padding: 0px;
}

[hjohnson]

Lisa, I finally got a chance to try this (meaning the phrase "complex selector" scared me and so I procrastinated), and it worked. And was a lot simpler than I thought. The one thing I noticed, though, is that viewing a topic with tables in preview takes a lot longer now - I'm guessing because it takes time to look through the table and apply the complex selector settings to each instance of the <p> tag.

Thanks for the help,

Helen@Block