Tables and CSS

[Nadia Gaganova]

Hello everyone,
can you help me with applying CSS to tables? I'm trying to change cell padding for a particular table style, adding the style code to custom.css file in the skin. However, the cells have inline style code (settings from the style defined in the project), which overrides the CSS. Can I remove the padding from the style in project? How is the table to be CSS-styled if inline styles always have priority?

[Martin Wynne]

Hi Nadia,

You can use !important in CSS to over-ride inline styles.

Code: Select all

color:red !important;

It is considered bad practice though. If you want a specific table it is usually better to insert an HTML Code Object instead. Sometimes this is the only way in H&M to get the exact column widths and spacings wanted. That's because the editor also has to provide for PDF, RTF and printed output (and RVF topic text).

You can use multiple HTML Code Objects to provide the <tr><td> tags, etc., with normal H&M editor text between them. This allows you to use the full H&M functionality, searching, etc.

Alternatively the Table Properties dialog allows you to specify an optional table ID. You could use javascript in the page onload event to modify a table to whatever you want. Or insert a <style> HTML Code Object below the table to modify the styles for that ID after the inline styles have been read.

You can use:

Code: Select all

table-layout:fixed;

on narrow HTML tables to prevent the browser messing them up.

Martin.

[Tim Green]

I would agree with Martin here, although I'm more relaxed about using !important. It's frequently the simplest and most effective solution when you are working with HTML and CSS code that you don't have direct control over yourself, which is definitely the case in any content management system liked Help+Manual. Purists may frown on it but there is no technical or standards reason not to use it, and as Buddha said, "The truth is what works."

[Nadia Gaganova]

Hello Martin, Tim,
the fact is I also want a PDF even if it will have slightly different table settings, so HTML code object wouldn't work for me, would it? So for a little thing like different cell padding I'm going to go ahead and use !important. Thank you.

[Tim Green]

No, code objects don't work in PDF because to be able to they would need to be converted to something that works in PDF, which would mean having a parser that could understand everything that is possible in HTML, CSS and JS. Not practical.