CSS Table Alignment

<oXygen/> general issues.
cnevins
Posts: 5
Joined: Tue Mar 29, 2011 8:16 pm

CSS Table Alignment

Post by cnevins » Thu Apr 21, 2011 9:48 pm

Hi,

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

Thanks!

-Cole

sorin_ristache
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: CSS Table Alignment

Post by sorin_ristache » Fri Apr 22, 2011 4:26 pm

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
Posts: 79
Joined: Fri May 14, 2010 12:14 am

Re: CSS Table Alignment

Post by kirkilj » Fri Oct 11, 2013 5:26 am

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: CSS Table Alignment

Post by sorin_ristache » Fri Oct 11, 2013 11:46 am

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
Posts: 79
Joined: Fri May 14, 2010 12:14 am

Re: CSS Table Alignment

Post by kirkilj » Fri Oct 11, 2013 8:16 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: CSS Table Alignment

Post by sorin_ristache » Mon Oct 14, 2013 12:58 pm

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
Posts: 79
Joined: Fri May 14, 2010 12:14 am

Re: CSS Table Alignment

Post by kirkilj » Mon Oct 14, 2013 6:07 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: CSS Table Alignment

Post by sorin_ristache » Tue Oct 15, 2013 11:38 am

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
Posts: 79
Joined: Fri May 14, 2010 12:14 am

Re: CSS Table Alignment

Post by kirkilj » Tue Oct 15, 2013 5:47 pm

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

Thanks for hanging in there with me.

John

kirkilj
Posts: 79
Joined: Fri May 14, 2010 12:14 am

Re: CSS Table Alignment

Post by kirkilj » Tue Oct 15, 2013 6:00 pm

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
Posts: 4144
Joined: Fri Mar 28, 2003 2:12 pm

Re: CSS Table Alignment

Post by sorin_ristache » Wed Oct 16, 2013 9:23 am

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
Posts: 41
Joined: Wed Mar 27, 2019 10:12 am

Re: CSS Table Alignment

Post by Manohar_1024 » Wed Mar 27, 2019 12:35 pm

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
Posts: 625
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS Table Alignment

Post by Costin » Wed Mar 27, 2019 2:58 pm

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

Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support

Manohar_1024
Posts: 41
Joined: Wed Mar 27, 2019 10:12 am

Re: CSS Table Alignment

Post by Manohar_1024 » Wed Mar 27, 2019 3:57 pm

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
Posts: 625
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS Table Alignment

Post by Costin » Wed Mar 27, 2019 4:21 pm

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
Costin Sandoi
oXygen XML Editor and Author Support

Manohar_1024
Posts: 41
Joined: Wed Mar 27, 2019 10:12 am

Re: CSS Table Alignment

Post by Manohar_1024 » Thu Mar 28, 2019 8:17 am

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
Posts: 625
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS Table Alignment

Post by Costin » Thu Mar 28, 2019 12:04 pm

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
Costin Sandoi
oXygen XML Editor and Author Support

Post Reply