Table Columns expand when generating HTML5 help

[dizzo]

I have two table style sheets for a doc set (based off of the provided table styles with only color changes), and when editing the topics and creating tables, the content fits fine in the table and looks normal - i.e., width of cell matches the text within it.

However, once I generate the help, the first column width expands a lot, and the rightmost column 'scrunches up'.

Any ideas? Been struggling with this one for a while.

Running Madcap Flare most recent version, HTML5 output.

bad_table1.jpg

bad_table2.jpg

[Jbleasdale]

What are your table width settings?

You can set fixed or automatic column widths, so i'd wager to say thats something to do with this issue.

[cubreporter51]

If you are not specifically setting the width of the columns, the columns will fill whatever space they need within the parent element. You have a couple of options to fix that: 1) size the column on your editor, which will apply in-line style that applies ONLY to this table and no others or 2) create a class or use a pseudo selector to target each <td> within a <tr> tag for specific CSS. The latter approach fixes every table that you create in the project.

If you want to maintain some flexibility in your layout, set the max-width property of the <td>s in the first column (by giving them a class, or using a pseudo selector). The max-width will let the width vary for responsive layouts up to a certain point, then keep the column (in your case) from growing any larger, even if there is room for it.

Example CSS:
td:first-child {
max-width: 50 px;
}
td:nth-child(2) { //CSS for the "middle column"
width: auto;
}
td:nth-child(3) { //CSS for "right column"
max-width: 100 px;
}

OR

.firstColumn {
max-width: 50 px;
}
...and so on...

[dizzo]

I think this is getting closer.

Cubreporter51, would I add this CSS to the main Flare project style sheet, or the table style sheet in question?

[cubreporter51]

I can't say with 100% accuracy (since I don't use tables due to my site administrator's directives), but I would assume that if you use the pseudo selector method, you'd want them in your table styles. If you choose the class method, in the main styles. I think Flare would apply them in either case, it's probably more for your sanity and organizational principles as to where to put them. Test them out and see which one works better (or works at all, since Flare can be fickle about styles).

[NorthEast]

I can't say with 100% accuracy (since I don't use tables due to my site administrator's directives), but I would assume that if you use the pseudo selector method, you'd want them in your table styles. If you choose the class method, in the main styles. I think Flare would apply them in either case, it's probably more for your sanity and organizational principles as to where to put them. Test them out and see which one works better (or works at all, since Flare can be fickle about styles).

The table stylesheet will refresh itself if you edit it in the table stylesheet editor, so it's possible for CSS that you've added manually to disappear (depending exactly where you put the CSS in that file).

So I'd avoid putting CSS in the table stylesheet, and put it in your main stylesheet.

[cubreporter51]

Thank you for clarifying that, Dave. I don't often work with tables, and generally favor manually adding my own CSS to the main stylesheet without using the editor (since I am comfortable with CSS and find it easier). It's always nice to learn a little about how the tool works in case I ever need to use it that way.

[mattf]

set the max-width property of the <td>s in the first column (by giving them a class, or using a pseudo selector).

For me, it's the middle column of three widening to the point where the third column is scrunched. I want to try setting maxWidth but where do I apply this selector? I created a td selector named for the table I want to try this on (.errorsTable) but I don't know where to tell the column to use that selector. I don't see anything in the table style editor that lets me set column style. I see column style in the HTML inline, but I don't want to use inline formatting.

Thanks,
-Matt