CSS Table Alignment

[cnevins]

Hi,

Is there a good method of aligning tables (left, center, right) via CSS for display in Author mode?

Thanks!

-Cole

[sorin_ristache]

Hello Cole,

Just set in the CSS stylesheet the property margin-left:auto; and margin-right:0px; on the XML table element for aligning the table to the right. Set both margins to auto for centering the table:

Code: Select all

table {

  margin-left:auto;

  margin-right:auto;

}

By default the table is aligned to the left. Of course the table must have a width smaller than the width of the Author editor, for example using colspec elements in the XML document in case of a CALS table. See for example the toolbar action for inserting a table in a DITA topic file which allows you to specify if you want a CALS table or a simple table, the number of rows and columns, the column widths, etc.


Regards,
Sorin

[kirkilj]

I'm having difficulty trying to get this to work with DITA tgroup elements. DITA appears to support an "align" attribute on tgroup elements, where the table element does not.

table tgroup[align="center"] {
margin-left: auto;
margin-right: auto;
/* background-color: red; Ensure that the selector is correct */
}

The visual table in Author mode stays left aligned. Hints?

[sorin_ristache]

Hello,

You have to make sure that a fixed width is set on the element that has a margin set to auto. If you set a width of 500 pixels for example, or 700 pixels, on the tgroup element then the auto margin will take effect:

Code: Select all

table tgroup[align="center"] {

    margin-left: auto;

    margin-right: auto;

    background-color: red; 

    width: 700px;

}

Regards,
Sorin

[kirkilj]

That's a bit problematic. It implies that the stylesheet would have to know the sum of the fixed widths in the colspecs for the columns in advance, which is unworkable for all possible tables the selector might apply to... unless I can somehow employ the oxy_xpath CSS function to do so, which is making my brain hurt at the moment. I've seen the XSL mischief that the DITA OT FO pipeline goes through to calculate column widths, and it isn't pretty.

John

[sorin_ristache]

Hello,

You need to set a fixed width for the auto margin property to take effect. You could create one selector for each type of table. An attribute class or base could make the difference between the various types of tables:

Code: Select all

table[class="myType1"] tgroup[align="center"] {

    margin-left: auto;

    margin-right: auto;

    background-color: red;

    width: 700px;

}



table[class="myType2"] tgroup[align="center"] {

    margin-left: auto;

    margin-right: auto;

    background-color: red;

    width: 700px;

}



. . .

Regards,
Sorin

[kirkilj]

It sounds like there is no workable solution at the moment. There's no way we can go back to thousands of tables in our CMS and add outputclass attributes for different widths of tables. If the fixed width is wider than the sum of the column widths, the rendering engine adds a blank area that looks like an extra column. There doesn't appear to be a UI interface either, such as "Table > Alignment > Center, Left, or Right". It's great that you've provided a Sort Table function in 15.1. We could use an Align Table function in the future since our OT PDF pipeline supports it.

If there was an oxy_tableWidth() CSS function, then I could use that as the fixed width for CSS purposes. Does the Author SDK allow us to write our own such CSS function?

John

[sorin_ristache]

Hi John,

I found a better solution for you: just set zero width in the CSS on the tgroup element of the tables that you want to center in the Author mode:

Code: Select all

table tgroup[align="center"] {

    margin-left: auto;

    margin-right: auto;

    width: 0px;

    . . .

}

You can also use two Oxygen extension functions to add up the fixed widths from the colspec elements, if the colspec elements have a fixed width, for example:

Code: Select all

    <tgroup cols="3" align="center">

        <colspec colname="c1" colnum="1" colwidth="200"/>

        <colspec colname="c2" colnum="2" colwidth="100"/>

        <colspec colname="c3" colnum="3" colwidth="100"/>

        . . .

Code: Select all

table tgroup[align="center"] {

    margin-left: auto;

    margin-right: auto;

    width: oxy_concat(oxy_xpath("sum(colspec/@colwidth)"), "px");    

}

Regards,
Sorin

[kirkilj]

Aha! It's the old 0px width trick! Thanks so much. Works like a charm.

Thanks for hanging in there with me.

John

[kirkilj]

It looks like your second example assumes that no units would have been provided.

In my case, I thought I would have to write a long nested XPath if statement to handle the unit conversions for colwidth. Some content authors might have used different units such as in, cm, em, etc..

I'm just asking for educational benefit. The first solution is perfect for my current needs.

[sorin_ristache]

Hi,

Yes, the second solution assumes there are no units in the colwidth attributes. If there are units some Oxygen CSS extension functions could be used for trimming the units off the width numbers, which would make the expression long. I added it just as an alternative. Of course, you can just use the first solution.


Regards,
Sorin

[Manohar_1024]

But how to place wide tables in complete page orientation like the table are having 8 columns.
i want this solution to be done in the CSS style

[Costin]

I Author editing mode or in output?
If in output, what specific output (what specific scenario are you using)?

Regards,
Costin

[Manohar_1024]

Yeah thanks for the reply
I want PDF output using CSS
I am using editor
like wide tables css code is available in help but that code is not working
And in the css code for landscape rotate or transform function is showing some error.
So basically in my project some pages are in portrait and that wide tables are placed are rotated or in landscape mode

[Costin]

Hello,

You should read the instructions from the "Tables" section in the User-Guide. Especially the ones from the "How to Deal With Wide Tables - Page Rotation" subsection.

Regards,
Costin

[Manohar_1024]

Hello thanks for the reply.
But i have already mentioned in my post that it is not working out.
I have already tested that out it is not getting effected.
This is the reason i have approached forums

[Costin]

It is not clear what exactly did not work for you after following the steps instructed in the User-Guide page I indicated.

Therefore, in order to investigate this further, we would need you to send us the customization CSS file that you are using and a screenshot with the error message you receive.
You could use our official support email address (support@oxygenxml.com) to send the files.

Regards,
Costin