Oxygen XML Forum

Posted: **Thu Jun 18, 2015 10:09 am**

Hi,

on the users meetup George said you will (probably) add the pseudo-element "outer" in the next release. Now I'd like to get apseudo-element "inner" as well.

Use-case 1
Consider this xml

Code: Select all

<List>

	<Entry>

		<Name>1st Parameter</Name>

		<Value>1111</Value>

	</Entry>

	<Entry>

		<Name>2nd Parameter</Name>

		<Value>2222</Value>

	</Entry>

</List>

To display this as a table with css is no problem. But to show a table header, currently I have to add more elements to the xml before the first entry. For instance

Code: Select all

<Header>

	<Name/>

	<Value/>

</Header>

With a combination of before and inner I should be able to do this purely from css with something like this:

Code: Select all


List > Entry:first-child:before {

	display: table-row;

}

List > Entry:first-child:before:inner {

	display: table-cell;

	content: "Name";

}

List > Entry:first-child:before:inner:after {

	display: table-cell;

	content: "Value";

}

Use-case 2
display this compact xml as table:

Code: Select all

<List>

	<Entry Name="1st Parameter">1111</Entry>

	<Entry Name="2st Parameter">2222</Entry>

</List>

with this css:

Code: Select all

List {

	display: table;

}

List > Entry {

	display: table-row;

}

List > Entry:inner {

	display: table-cell;

}

List > Entry:inner:before {

	display: table-cell;

	content: attr(Name);

}

Regards,
Patrik

Posted: **Thu Jun 18, 2015 11:00 am**

Hi Patrik,

Even if at some future version we add support for inner(n) it will probably not work in such complicated cases, to create entire table rows and cells. So it is quite improbable that this will ever work.
Maybe you could add a :before block on the entire table and add some static content there which explains what each column does. Or add :before selectors on the Name and Value cells with "Name:" and "Value:" labels.

Instead of displaying the list as a table you could display it as a block.
Each entry would also be a block, the Name and Value elements would be inline and they would also have a border around them + a fixed width so that it all ends up looking like a table.

Regards,
Radu

Posted: **Thu Jun 18, 2015 11:24 am**

Hi Radu,

I already have proper workaround for both cases:
For the first one I just added the header-elements to xsd as mandatory elements so they are added automatically as guess elements.

For the second one I use :before with oxy_label() as content using fixed width.

Just was thinking on a way to make it even clother to the actual output (in PDF it is converted to a real table).

Regards,
Patrik

Posted: **Thu Oct 08, 2015 10:33 am**

More about....CSS Table Formatting

Manly

Posted: **Fri Jun 16, 2017 2:04 am**

Has there been any development or workaround that addresses the desire for "pseudo-elements" to serve as headers of a table? Like the OP, I have repeated elements in my XML that would be served nicely in Author mode with a tabular layout, but I don't have XML elements that can provide the "anchor" for the header elements in that table.

Posted: **Fri Jun 16, 2017 8:00 am**

You can do this nicely with existing css (I think supported since oXygen ~v17.1):

Code: Select all

my-table > my-row:first-child > *:before {

  // set styling for all header cells

  display: block;

  background-color: gray; // imitate table header

  font-weight: bold;

  border-bottom: solid 1px black; // imitate seperate row

  margin-top: -1px; // undo padding of table cell

  margin-left: -1px; // undo padding of table cell

  margin-right: -1px; // undo padding of table cell

}



// set the content for each column header

my-table > my-row:first-child > my-column1:before {

  content: "column header 1";

}

my-table > my-row:first-child > my-column2:before {

  content: "column header 2";

}

You will probably have to tweak some settings (e.g. the neative margin) to fit your table styling.

Patrik

Posted: **Fri Jun 16, 2017 8:42 am**

Hi,

We have not done any additional work to support with a custom CSS extension the creation of an additional header row for an existing table.
Patrik's approach is interesting, for the last 2 selectors you will probably need to use "nth-child(X)" to specify for each table cell the static label that needs to be placed above it.

Regards,
Radu

Posted: **Fri Jun 16, 2017 11:34 pm**

Patrik, this is great! Thank you so much.

FYI, I did not find that nth-child() was necessary.

Posted: **Sat Jun 17, 2017 12:45 am**

You would have needed the :nth-child() only when your entry element were identical (e.g. entry, entry, ... instead of entry1, entry2, ...).

Patrik

Oxygen XML Forum

CSS Pseudo-Element "inner(n)"

CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"

Re: CSS Pseudo-Element "inner(n)"