Making table text look the same if <td....> or <p>.

[mmarrinan]

I'm trying to figure out how to adjust the table styles and stylesheet styles so that if I forget to hit <ENTER> in a cell with a single line, it will have the same spacing around the cell as if I hit <ENTER> and it became a <p>. However, I don't want to ruin the spacing the occurs between paragraphs if I have a multi-paragraph cell. I've adjusted the cell padding in the actual table stylesheet and the padding in the stylesheet, the td and tr styles and the td p styles, but I just can't seem to make it happen. I apologize if the questions is confusing. Does anyone have any ideas?

[LTinker68]

You'll want to set the styles on the <td> tag and then create a complex selector for paragraphs inside table cells. In the examples below, a regular paragraph has a margin-bottom of 18px to separate it from anything that follows it. The <td> tag is set up with padding of 4px so that your text isn't flush to the cell walls (with or without using borders on the cells). But, if you put a <p> inside a <td> then you're going to end up with a 18px gap between the paragraphs and a 22px gap between the last paragraph and the cell wall because it's adding the paragraph margin to the cell padding. So you create a complex selector that basically says that when a paragraph is inside a cell, use a different margin-bottom value for the paragraph. So your stylesheet codes could look similar to the following (simplified code -- all colors, fonts, etc. are hidden for this example). The last block of code is the complex selector.

Code: Select all

p {
    margin-bottom:18px;
    padding:0;
}

td {
    margin:0;
    padding:4px;
}

td p {
    margin-bottom:8px;
    padding-bottom:0;
}