Changes in tablestyle not reflected in the topics

[sniper_bcn]

Hi,

I have a problem. Latest changes introduced in the TableStyles / default.css are not being reflected in the tables in the topics.
I just added some padding to the table cells (as cabn be seen in the exagerated example below). But any padding between text and cell borders is being completely ignored. The text is almost touching the borders (I checked both in the pdf preview and in the pdf printed output).

mcTableStyle
{
name: table3;
border-collapse: collapse;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #cd071e;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #cd071e;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #cd071e;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #cd071e;
max-id: 3;
text-align: left;
cell-padding-left: 20pt;
cell-padding-right: 10pt;
cell-padding-top: 10pt;
cell-padding-bottom: 10pt;
}

mcTableColumnStyle
{
span: 1;
separator-style: solid;
separator-width: 1px;
separator-color: #cd071e;
name: Column1;
id: 0;
}

mcTableHeadStyle
{
span: 1;
separator-style: solid;
separator-width: 1px;
name: Header1;
id: 2;
background-color: #cd071e;
color: #ffffff;
text-align: left;
cell-padding-left: 20pt;
cell-padding-right: 10pt;
cell-padding-top: 10pt;
cell-padding-bottom: 10pt;
}

Any help will be much appreciated!

Daniel

[LTinker68]

The text is almost touching the borders (I checked both in the pdf preview and in the pdf printed output).

Did you check to see if there were inline styles defined in the specific table(s) you're applying that stylesheet to? Inline styles override stylesheet styles. Open the topic in the Internal Text Editor, look for the opening <table> tag, and see if there is a style="" block.

Also, if your table cells contain other tags, such as a paragraph or list, the styles defined for those tags will override the styles defined for the <td> tag. (Although in this example, it would mean those base tags have negative margins.) Anyway, you might need to define a complex selector or two to control the styles of those base tags when they're contained within a <td> tag.

[jasonsmith]

I've given up on using Table Stylesheets and always use the default table style and add formatting by hand. If you need lots of tables with the same format make an empty one and copy it. This gives you more flexibility and lets you use tr styles that insert page-breaks after/before specific rows etc.

[sniper_bcn]

The text is almost touching the borders (I checked both in the pdf preview and in the pdf printed output).

Did you check to see if there were inline styles defined in the specific table(s) you're applying that stylesheet to? Inline styles override stylesheet styles. Open the topic in the Internal Text Editor, look for the opening <table> tag, and see if there is a style="" block.

Also, if your table cells contain other tags, such as a paragraph or list, the styles defined for those tags will override the styles defined for the <td> tag. (Although in this example, it would mean those base tags have negative margins.) Anyway, you might need to define a complex selector or two to control the styles of those base tags when they're contained within a <td> tag.

Hi Lisa,

Thank you very much for looking at this.
I looked for an example of a table that is not fully affected by the CSS from the table style, and this is what it looks like in the editor:

Code: Select all

<table style="mc-table-style: url('../Resources/TableStyles/default.css');margin-left: 0;margin-right: auto;" class="TableStyle-default" cellspacing="0">
            <col class="Column-Column1" />
            <col class="Column-Column1" />
            <thead>
                <tr class="Head-Header1">
                    <th class="HeadE-Column1-Header1">
                        <p>Button</p>
                    </th>
                    <th class="HeadD-Column1-Header1">
                        <p>Function</p>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="Body-Body1">
                    <td class="BodyE-Column1-Body1">
                        <p>Office</p>
                    </td>
                    <td class="BodyD-Column1-Body1">
                        <p>Opens a new dialog box.</p>
                    </td>
                </tr>
                <tr class="Body-Body1">
                    <td class="BodyE-Column1-Body1">
                        <p>Query</p>
                    </td>
                    <td class="BodyD-Column1-Body1">
                        <p>Some text.</p>
                    </td>
                </tr>
                <tr class="Body-Body1">
                    <td class="BodyE-Column1-Body1">
                        <p>Print</p>
                    </td>
                    <td class="BodyD-Column1-Body1">
                        <p>Print/Preview.</p>
                    </td>
                </tr>
                <tr class="Body-Body1">
                    <td class="BodyE-Column1-Body1">
                        <p>Cancel</p>
                    </td>
                    <td class="BodyD-Column1-Body1">
                        <p>Quits the dialog box without saving data.</p>
                    </td>
                </tr>
                <tr class="Body-Body1">
                    <td class="BodyB-Column1-Body1">
                        <p>OK</p>
                    </td>
                    <td class="BodyA-Column1-Body1">
                        <p>Closes the dialog box.</p>
                    </td>
                </tr>
            </tbody>
        </table>

On the other hand, this is what the CSS for the table looks like (you will see that the definition was made directly in the CSS, because the XML Editor would have not allowed to do some of it):

Code: Select all

/* MadCap Table Style: */

/*<meta Version="7" />*/

mcTableStyle
{
	name: table3;
	border-collapse: collapse;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #8b0000;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #8b0000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #8b0000;
	max-id: 3;
	margin-bottom: 12pt;
}

mcTableColumnStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #8b0000;
	name: Column1;
	id: 0;
}

mcTableHeadStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	name: Header1;
	id: 2;
	background-color: #8b0000;
	color: #ffffff;
}

mcTableBodyStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #8b0000;
	name: Body1;
	id: 1;
}

mcTableFootStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #000000;
	name: Footer1;
	id: 3;
}


/* Cell Styles: */
 
.TableStyle-default
{
	border-collapse: collapse;
	border-left-style: solid;
	border-left-color: #8b0000;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #8b0000;
	border-right-width: 1px;
	border-top-style: solid;
	border-top-color: #8b0000;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #8b0000;
	border-bottom-width: 1px;
	margin-bottom: 12pt;
	border-spacing: 0px 0px;
}

.TableStyle-default .Column-Column1
{
	
}

.TableStyle-default .Head-Header1
{
	
}

.TableStyle-default .HeadI-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadI-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadE-Column1-Header1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
	color: #ffffff;
	background-color: #8b0000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default .HeadE-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadF-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default .HeadF-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadH-Column1-Header1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadH-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadD-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default .HeadD-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadC-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadC-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadB-Column1-Header1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadB-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadA-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadA-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .HeadG-Column1-Header1
{
	color: #ffffff;
	background-color: #8b0000;
}

.TableStyle-default .HeadG-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default .Foot-Footer1
{
	
}

.TableStyle-default .FootI-Column1-Footer1
{
	
}

.TableStyle-default .FootI-Column1-Footer1 p
{
	
}

.TableStyle-default .FootE-Column1-Footer1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default .FootE-Column1-Footer1 p
{
	
}

.TableStyle-default .FootF-Column1-Footer1
{
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default .FootF-Column1-Footer1 p
{
	
}

.TableStyle-default .FootH-Column1-Footer1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
}

.TableStyle-default .FootH-Column1-Footer1 p
{
	
}

.TableStyle-default .FootD-Column1-Footer1
{
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default .FootD-Column1-Footer1 p
{
	
}

.TableStyle-default .FootC-Column1-Footer1
{
	
}

.TableStyle-default .FootC-Column1-Footer1 p
{
	
}

.TableStyle-default .FootB-Column1-Footer1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
}

.TableStyle-default .FootB-Column1-Footer1 p
{
	
}

.TableStyle-default .FootA-Column1-Footer1
{
	
}

.TableStyle-default .FootA-Column1-Footer1 p
{
	
}

.TableStyle-default .FootG-Column1-Footer1
{
	
}

.TableStyle-default .FootG-Column1-Footer1 p
{
	
}

.TableStyle-default .Body-Body1
{
	
}

.TableStyle-default .BodyI-Column1-Body1
{
	
}

.TableStyle-default .BodyI-Column1-Body1 p
{
	
}

.TableStyle-default .BodyE-Column1-Body1
{
	border-bottom-width: 1px;
	border-bottom-color: #8b0000;
	border-bottom-style: solid;
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
}

.TableStyle-default .BodyE-Column1-Body1 p
{
	
}

.TableStyle-default .BodyF-Column1-Body1
{
	border-bottom-width: 1px;
	border-bottom-color: #8b0000;
	border-bottom-style: solid;
}

.TableStyle-default .BodyF-Column1-Body1 p
{
	
}

.TableStyle-default .BodyH-Column1-Body1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
}

.TableStyle-default .BodyH-Column1-Body1 p
{
	
}

.TableStyle-default .BodyD-Column1-Body1
{
	border-bottom-width: 1px;
	border-bottom-color: #8b0000;
	border-bottom-style: solid;
}

.TableStyle-default .BodyD-Column1-Body1 p
{
	
}

.TableStyle-default .BodyC-Column1-Body1
{
	
}

.TableStyle-default .BodyC-Column1-Body1 p
{
	
}

.TableStyle-default .BodyB-Column1-Body1
{
	border-right-width: 1px;
	border-right-color: #8b0000;
	border-right-style: solid;
}

.TableStyle-default .BodyB-Column1-Body1 p
{
	
}

.TableStyle-default .BodyA-Column1-Body1
{
	
}

.TableStyle-default .BodyA-Column1-Body1 p
{
	
}

.TableStyle-default .BodyG-Column1-Body1
{
	
}

.TableStyle-default .BodyG-Column1-Body1 p
{
	
}

[sniper_bcn]

I've given up on using Table Stylesheets and always use the default table style and add formatting by hand. If you need lots of tables with the same format make an empty one and copy it. This gives you more flexibility and lets you use tr styles that insert page-breaks after/before specific rows etc.

I'll keep it in mind in case I cannot solve the issue, thanks!

[LTinker68]

I don't use table styles either -- haven't really had a need to, plus it doesn't play well with merged cells and alternating table rows.

However, if you're using it, and the interface doesn't have the option to add padding within the cells from the GUI (can't remember if it does or not), then you can add a complex selector to the topic stylesheet that will take care of it for you. You'll have to open the topic stylesheet in the Internal Text Editor and manually add them, because you can't add them via the Stylesheet Editor. You should be able to add something like the following:

Code: Select all

table.TableStyle-default th,
table.TableStyle-default td {
   padding:4pt;
}

That's two complex selectors written together because they have the same attribute declaration, but what it's saying is that if you have a <th> tag or a <td> tag inside a table tag with a class of "TableStyle-default", then set a padding of 4pt to the <th> and <td> tags.

I don't know if Flare uses the same class name across multiple table stylesheets. If it doesn't, then you'll have to add more complex selectors for each table class name it creates.

[sniper_bcn]

Thank you very much, Lisa. You are wonderful!

Daniel

[DocuWil]

In my case I wanted to have the table style indented 5mm:

Code: Select all

mcTableStyle
{
	name: HousStyleHeader_05;
	border-collapse: collapse;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	cell-padding-left: 5px;
	cell-padding-right: 5px;
	cell-padding-top: 0px;
	cell-padding-bottom: 0px;
	border-left-color: #000000;
	border-right-color: #000000;
	border-top-color: #000000;
	border-bottom-color: #000000;
	max-id: 3;
	page-break-after: auto;
	page-break-inside: auto;
	margin-left: 5mm;
}

You can see at the bottom-end that it is 5mm
However, when I select the table style (HousStyleHeader_05) in my topic it is just not reflected:

Code: Select all

 <table class="TableStyle-HousStyleHeader_05" style="mc-table-style: url('Resources/TableStyles/HousStyleHeader_05.css'); margin-left: 0; margin-right: auto;" cellspacing="0">

You see it is set to 0.
When I change it in the Text Editor to 5mm and create the target everything is ok.
I suppose it is a bug, isn't it?

[LTinker68]

The cascading part of CSS means that the style declaration closest to the content wins. In the table tag in the topic, any inline styles (e.g., margin-left, etc.) will override whatever is in your topic stylesheet or your table stylesheet because that inline style is closest to the content, so it wins. So if you want the table to be indented, then you need to remove the margin-left attribute in the table tag in the topic. That margin-left and margin-right of 0 is how tables are centered in the page, so if you set in the Table Properties that you wanted the table centered, then that's where those inline styles came from and that's why your left margin declaration isn't working. You either have to change the Table Properties to make the table positioned left, for example, or manually remove the margin-left:0 from the table tag in the topic.

So, no, it's not a bug. It's just that you changed your mind after you inserted the table.

[DocuWil]

Thanks Lisa,

More or less you are right.
I had the tables aligned left; i.e. when creating the table and setting Align to Left.

Now I set Align to Default and it works out fine.
In the topic using no ident:

Code: Select all

<table class="TableStyle-HousStyleHeader" style="mc-table-style: url('../Resources/TableStyles/HousStyleHeader.css');" cellspacing="0">

In the topic with ident:

Code: Select all

 <table class="TableStyle-HousStyleHeader_05" style="mc-table-style: url('../Resources/TableStyles/HousStyleHeader_05.css');" cellspacing="0">

So, nothing to find about margins!

Anyway, if someone wants to have indentation no Alignment should be set.
For a user who is not familiar with codes this not logic.

One can also use a blockquote, but that is an ugly work around.

[sniper_bcn]

Hi Lisa,

Still around?[

quote="LTinker68"]I don't use table styles either -- haven't really had a need to, plus it doesn't play well with merged cells and alternating table rows.

However, if you're using it, and the interface doesn't have the option to add padding within the cells from the GUI (can't remember if it does or not), then you can add a complex selector to the topic stylesheet that will take care of it for you. You'll have to open the topic stylesheet in the Internal Text Editor and manually add them, because you can't add them via the Stylesheet Editor. You should be able to add something like the following:

Code: Select all

table.TableStyle-default th,
table.TableStyle-default td {
   padding:4pt;
}

That's two complex selectors written together because they have the same attribute declaration, but what it's saying is that if you have a <th> tag or a <td> tag inside a table tag with a class of "TableStyle-default", then set a padding of 4pt to the <th> and <td> tags.

I don't know if Flare uses the same class name across multiple table stylesheets. If it doesn't, then you'll have to add more complex selectors for each table class name it creates.[/quote]


Text in my tables is displaying centered. If I add the following line to your code:

Code: Select all

table.TableStyle-table3 th,
table.TableStyle-table3 td 

{
    padding:4pt;
	text-align: left;
}

Text is still centered. What am I missing?

Below is the complete code, in case it helps.

Thanks a lot!

Daniel


[code]

/* MadCap Table Style: */

/*<meta Version="7" />*/

mcTableStyle
{
	name: default_test;
	border-collapse: collapse;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #cd071e;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #cd071e;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	max-id: 3;
	text-align: left;
	cell-padding-left: 4pt;
	cell-padding-right: 4pt;
	cell-padding-top: 4pt;
	cell-padding-bottom: 4pt;
}

mcTableColumnStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #cd071e;
	name: Column1;
	id: 0;
}

table.TableStyle-default_test th,
table.TableStyle-default_test td 

{
    padding:4pt;
	text-align: left;
}


mcTableHeadStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	name: Header1;
	id: 2;
	background-color: #cd071e;
	color: #ffffff;
	text-align: left;
}

mcTableBodyStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #cd071e;
	name: Body1;
	id: 1;
	text-align: left;
}

mcTableFootStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #000000;
	name: Footer1;
	id: 3;
}


/* Cell Styles: */
 
.TableStyle-default_test
{
	border-collapse: collapse;
	border-left-style: solid;
	border-left-color: #cd071e;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #cd071e;
	border-right-width: 1px;
	border-top-style: solid;
	border-top-color: #cd071e;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cd071e;
	border-bottom-width: 1px;
	border-spacing: 0px 0px;
}

.TableStyle-default_test .Column-Column1
{
	
}

.TableStyle-default_test .Head-Header1
{
	
}

.TableStyle-default_test .HeadI-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadI-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadE-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadE-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadF-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadF-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadH-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadH-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadD-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadD-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadC-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadC-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadB-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadB-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadA-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadA-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadG-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadG-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .Foot-Footer1
{
	
}

.TableStyle-default_test .FootI-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootI-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootE-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootE-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootF-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootF-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootH-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .FootH-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootD-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootD-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootC-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootC-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootB-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .FootB-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootA-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootA-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootG-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootG-Column1-Footer1 p
{
	
}

.TableStyle-default_test .Body-Body1
{
	
}

.TableStyle-default_test .BodyI-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyI-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyE-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyE-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyF-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
}

.TableStyle-default_test .BodyF-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyH-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyH-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyD-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
}

.TableStyle-default_test .BodyD-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyC-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyC-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyB-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyB-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyA-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyA-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyG-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyG-Column1-Body1 p
{
	
}

[sniper_bcn]

Hi Lisa,

Still around?

I don't use table styles either -- haven't really had a need to, plus it doesn't play well with merged cells and alternating table rows.

However, if you're using it, and the interface doesn't have the option to add padding within the cells from the GUI (can't remember if it does or not), then you can add a complex selector to the topic stylesheet that will take care of it for you. You'll have to open the topic stylesheet in the Internal Text Editor and manually add them, because you can't add them via the Stylesheet Editor. You should be able to add something like the following:

Code: Select all

table.TableStyle-default th,
table.TableStyle-default td 
{
     padding:4pt;

}

That's two complex selectors written together because they have the same attribute declaration, but what it's saying is that if you have a <th> tag or a <td> tag inside a table tag with a class of "TableStyle-default", then set a padding of 4pt to the <th> and <td> tags.

I don't know if Flare uses the same class name across multiple table stylesheets. If it doesn't, then you'll have to add more complex selectors for each table class name it creates.

Text in my tables is displaying centered. If I add the text align left line to your code:

Code: Select all

table.TableStyle-table3 th,
table.TableStyle-table3 td

{
    padding:4pt;
    text-align: left;
}

Text is still centered. What am I missing?

Below is the complete code, in case it helps.

Thanks a lot!

Daniel

Code: Select all

/* MadCap Table Style: */

/*<meta Version="7" />*/

mcTableStyle
{
	name: default_test;
	border-collapse: collapse;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #cd071e;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #cd071e;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	max-id: 3;
	text-align: left;
	cell-padding-left: 4pt;
	cell-padding-right: 4pt;
	cell-padding-top: 4pt;
	cell-padding-bottom: 4pt;
}

mcTableColumnStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #cd071e;
	name: Column1;
	id: 0;
}

table.TableStyle-default_test th,
table.TableStyle-default_test td 

{
    padding:4pt;
	text-align: left;
}


mcTableHeadStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	name: Header1;
	id: 2;
	background-color: #cd071e;
	color: #ffffff;
	text-align: left;
}

mcTableBodyStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #cd071e;
	name: Body1;
	id: 1;
	text-align: left;
}

mcTableFootStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #000000;
	name: Footer1;
	id: 3;
}


/* Cell Styles: */
 
.TableStyle-default_test
{
	border-collapse: collapse;
	border-left-style: solid;
	border-left-color: #cd071e;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #cd071e;
	border-right-width: 1px;
	border-top-style: solid;
	border-top-color: #cd071e;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cd071e;
	border-bottom-width: 1px;
	border-spacing: 0px 0px;
}

.TableStyle-default_test .Column-Column1
{
	
}

.TableStyle-default_test .Head-Header1
{
	
}

.TableStyle-default_test .HeadI-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadI-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadE-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadE-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadF-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadF-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadH-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadH-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadD-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.TableStyle-default_test .HeadD-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadC-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadC-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadB-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadB-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadA-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadA-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .HeadG-Column1-Header1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	color: #ffffff;
	text-align: left;
	background-color: #cd071e;
}

.TableStyle-default_test .HeadG-Column1-Header1 p
{
	color: #ffffff;
}

.TableStyle-default_test .Foot-Footer1
{
	
}

.TableStyle-default_test .FootI-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootI-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootE-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootE-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootF-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootF-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootH-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .FootH-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootD-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-top-width: 1px;
	border-top-color: #000000;
	border-top-style: solid;
}

.TableStyle-default_test .FootD-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootC-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootC-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootB-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .FootB-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootA-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootA-Column1-Footer1 p
{
	
}

.TableStyle-default_test .FootG-Column1-Footer1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
}

.TableStyle-default_test .FootG-Column1-Footer1 p
{
	
}

.TableStyle-default_test .Body-Body1
{
	
}

.TableStyle-default_test .BodyI-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyI-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyE-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyE-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyF-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
}

.TableStyle-default_test .BodyF-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyH-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyH-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyD-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-color: #cd071e;
	border-bottom-style: solid;
}

.TableStyle-default_test .BodyD-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyC-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyC-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyB-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
	border-right-width: 1px;
	border-right-color: #cd071e;
	border-right-style: solid;
}

.TableStyle-default_test .BodyB-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyA-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyA-Column1-Body1 p
{
	
}

.TableStyle-default_test .BodyG-Column1-Body1
{
	padding-left: 4pt;
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	text-align: left;
}

.TableStyle-default_test .BodyG-Column1-Body1 p
{
	
}

[LTinker68]

If your content is directly within a td or th tag inside a table set to class "TableStyle-table3", then the text will be aligned left, as you have in your code. However, if your content is sitting inside a paragraph tag inside a td or th tag, then the style of that paragraph tag rules. So if your paragraph tag is set to center the text, then the text in the cell will be centered. Likewise if the content is inside a list or div or other tag inside the table cell. Also, if you have inline styles on the content, that style will win. So if you have a span around the content inside the table cell and that style sets alignment to center, then the content will be centered.

So, what does the topic code for that table look like?