making <td> equivalent to <p>

[pdenchfield]

Other than manually setting a <td> style using the same definitions as <p>, is there a way to make all table cells look the same space-wise, regardless of whether <p> is included or not within various table cells? Thanks!

[emsachs]

The best I've been able to find, you can highlight all the cells in a table, right -click, and select "Cell Content Style". In my experience, it's easier to set a td style for each table style.

[pdenchfield]

Thank you, emsachs! Although I was looking for an automated method, this is news to me that I can apply <p> tags to all cells in the table using Cell Content Style.

[Mike Kelley]

If you're saying you want <td> elements to have the same styling as <p> elements, you can do that in your CSS.

1. Find the CSS that has the <p> style you want to mimic.
2. Right-click on it and select "Open with... --> Text editor".
3. Find the <p> style you want to mimic and change the selector to be "p, td". This means "Apply the following style ruleset to all <p> and <td> elements". It would look something like:
   

   Code: Select all

   p, td {
       ...
       padding: 8px;
       ...
   }

Combining selectors is a great way to make sure different elements always have the same set of styles applied to them at all times. If you don't want them to share all rules, you can create a new ruleset for just the padding of those two elements.

[Rene Severens]

Hi,

@ Mike Kelley: Is there also a nice CSS solution when using a tablestylesheet?

I have a table that uses a table stylesheet. In this table I have 3 columns (among others) that all have cells filled with a bulleted list with a customized icon ("-"). I want to give the text of these <li> icons a font-size of 9pt, while the font size for a <p> is 10pt. Even when specified the font-size in the tablestylesheet dialog to be 9pt for the table, the list-items still have a font-size of 10pt. When selected all cells and using the "Cell Content Style" option, this does not apply this p-style (and yes, the wanted p-style is listed!), to the list-items.

I guess this is because there is no inheritance for <li>'s used inside a table to use the tablestylesheet defined font and font-size. This would solve this issue with 1 mouse-click. Now I must apply a new created "li_forTable" style on EACH <li>-item in the table to get what I want, so overruling each item with an inline style.

Greetings,
Rene Severens

[kwag_myers]

I'm not sure that you have to use the tablestyles.css for that. Try adding the following to your main CSS (in a text editor):

Code: Select all

td li
{
	font-size: 9pt;
}

[Mike Kelley]

Rene,

kwag_myers is right. You don't need to apply any new markup (HTML source) to the list items in your table. You can instead use specificity in your CSS to target those list items. The CSS selector kwag_myers posted is perfectly valid and allows you to target and style list items that appear in your table however you like.

As a general rule, the less work you do in your topic markup (or with Flare's WYSIWYG) and the fewer inline styles/unique classes you use to format your content, the better off your content will be. CSS is all about formatting and style while HTML markup is purely about providing content to a page. CSS is very powerful and you can construct selectors to target a specific, or group of (such as your list items in table cells), elements in your markup.

[Rene Severens]

Hi,

You are right! After adjusting and applying this style, just selecting the text items and applying the bulleted list style from the menu is all that is needed to have the items listed as intended.

I was very close to the same solution, but somehow got the order mixed up and all my attempts did not give the wanted result.

Thank you VERY VERY much for this sollution!!!

Greetings,
and my best wishes for the Holidays and a Happy New Year 2015

Rene Severens

[pdenchfield]

Thanks, kwag_myers. We're wanting to reduce CSS maintenance overhead because if (more like when) the generic p tag changes we'll need to remember to update the p, td complex selector. Other ideas for a CSS in flux?

[kwag_myers]

Just for clarity, a Complex Selector (when viewed in a text editor) has no comma between tags:

Code: Select all

p td

This is a unique style, so changes to <p> have no impact.

In Mike Kelley's code, there is a comma separating each tag, which means all tags use the same style. If you want to change the <p> tag style, you must remove it from the list:

Code: Select all

p, td, div.note
{
	color: #749AB6;
}

becomes:

Code: Select all

td, div.note
{
	color: #749AB6;
}
p
{
	color: #000000;
}

[pdenchfield]

Thanks, kwag_myers! I just realized that setting styles as "p, td" removes the issue of CSS maintenance. Nice!

[Mike Kelley]

You can still have the paragraph element in the joined selector, especially if OP wants paragraphs and table data cells to have the same padding, such as this:

Code: Select all

p, td {
    padding: 4px;
}

I also explained in my previous post that another, separate ruleset could be created to define styles that should be unique to one or either, which would look something like:

Code: Select all

p, td {
    padding: 4px;
}
p {
    color: #222;
    font-size: 12px;
    line-height: 18px;
}
td {
    color: gray;
    font-size: 10px;
    line-height: 15px;
}

This way, padding is maintained in only one location and applies to both elements, yet they can both still have other unique styles applied.

[pdenchfield]

Excellent! Thank you, Mike Kelley.

[Mike Kelley]

I'm sorry, but I don't really like my previous example. I tailored it quickly to have relevance to this discussion, but in very few circumstances would you style <td> color, font-size, and line-height one way and completely different styles for a <p>. This is a much better example that I use when giving CSS training and is better suited for CSS beginners that might happen upon this thread:

Code: Select all

h1 {
    color: #444;
    padding: 8px;
    margin: 16px;
    border-bottom: 1px solid #444;
    font-size: 26px;
}
h2 {
    color: #444;
    padding: 8px;
    margin: 16px;
    border-bottom: 1px solid #444;
    font-size: 22px;
}
h3 {
    color: #444;
    padding: 8px;
    margin: 16px;
    border-bottom: 1px solid #444;
    font-size: 18px;
}
h4 {
    color: #444;
    padding: 8px;
    margin: 16px;
    border-bottom: 1px solid #444;
    font-size: 14px;
}

All these headings have the same color, padding, margin, and bottom border. The only difference between them is the font-size. That being the case, it's much better to combine selectors so my maintenance is easier:

Code: Select all

h1, h2, h3, h4 {
    color: #444;
    padding: 8px;
    margin: 16px;
    border-bottom: 1px solid #444;
}
h1 {
    font-size: 26px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 14px;
}

[pdenchfield]

Great example. Thank you!

[Niels]

If you're saying you want <td> elements to have the same styling as <p> elements, you can do that in your CSS.

1. Find the CSS that has the <p> style you want to mimic.
2. Right-click on it and select "Open with... --> Text editor".
3. Find the <p> style you want to mimic and change the selector to be "p, td". This means "Apply the following style ruleset to all <p> and <td> elements". It would look something like:
   

   Code: Select all

   p, td {
       ...
       padding: 8px;
       ...
   }

Combining selectors is a great way to make sure different elements always have the same set of styles applied to them at all times. If you don't want them to share all rules, you can create a new ruleset for just the padding of those two elements.

Starting with Flare 2020 the approach of setting a global <td> style, at least when it comes to the font size, is in conflict with Flare's new code snippet feature (as we found out with MadCap support): Setting a fix font size, for example, would override the font size for code snippets that you set via MadCap|codeSnippetBody { font-size: 8pt;} .