Page 1 of 1
CSS Table Alignment
Posted: Thu Apr 21, 2011 9:48 pm
by cnevins
Hi,
Is there a good method of aligning tables (left, center, right) via CSS for display in Author mode?
Thanks!
-Cole
Re: CSS Table Alignment
Posted: Fri Apr 22, 2011 4:26 pm
by 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
Re: CSS Table Alignment
Posted: Fri Oct 11, 2013 5:26 am
by 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?
Re: CSS Table Alignment
Posted: Fri Oct 11, 2013 11:46 am
by 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
Re: CSS Table Alignment
Posted: Fri Oct 11, 2013 8:16 pm
by 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
Re: CSS Table Alignment
Posted: Mon Oct 14, 2013 12:58 pm
by 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
Re: CSS Table Alignment
Posted: Mon Oct 14, 2013 6:07 pm
by 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
Re: CSS Table Alignment
Posted: Tue Oct 15, 2013 11:38 am
by 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
Re: CSS Table Alignment
Posted: Tue Oct 15, 2013 5:47 pm
by kirkilj
Aha! It's the old 0px width trick!
Thanks so much. Works like a charm.
Thanks for hanging in there with me.
John
Re: CSS Table Alignment
Posted: Tue Oct 15, 2013 6:00 pm
by 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.
Re: CSS Table Alignment
Posted: Wed Oct 16, 2013 9:23 am
by 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
Re: CSS Table Alignment
Posted: Wed Mar 27, 2019 12:35 pm
by 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
Re: CSS Table Alignment
Posted: Wed Mar 27, 2019 2:58 pm
by Costin
I Author editing mode or in output?
If in output, what specific output (what specific scenario are you using)?
Regards,
Costin
Re: CSS Table Alignment
Posted: Wed Mar 27, 2019 3:57 pm
by 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
Re: CSS Table Alignment
Posted: Wed Mar 27, 2019 4:21 pm
by 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
Re: CSS Table Alignment
Posted: Thu Mar 28, 2019 8:17 am
by 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
Re: CSS Table Alignment
Posted: Thu Mar 28, 2019 12:04 pm
by 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