Re: [oXygen-user] CSS for styling DITA as a table; how to add a table header?

23 Mar 2018

      Thanks, Radu. So, is the case that I ran into the limits of what one can 
be with CSS, which is a formatting rather than transformative language? 
If so, I apologize for posting here rather than on a general CSS forum 
-- But I knew that I'd get a quick response! As always, thanks for your 
help.

No need to add specific oXygen support for something like this.

Best,
Kris

Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)

On 3/23/2018 7:32 AM, Oxygen XML Editor Support (Radu Coravu) wrote:
...
Hi Kris,
We do not have specific support to create an artificial table header 
(although I agree it's quite useful in such cases).
I will add your vote on the opened issue and if we make some progress 
on it we'll let you know.
In the meantime you can try to continue your idea with the before: 
selectors which add labels something like:
...
*[class~="AMATtask/partDesc"]:before {
  content: "Description";
    display:block;
    border-bottom: 1px solid black;
  font-weight: bold;
  font-size:small;
}
Once those before selectors have display block you should be able to 
better separate them with a border or some background color from the 
cell's contents, make it look more like a table header.
Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
On 3/22/2018 6:11 PM, Kristen James Eberlein wrote:
...
I am developing CSS for the oXygen authoring environment.
There are a number of DITA elements that are best displayed as a table,
for example, the following rendering and source code:
*Source code:*
 <partsList>
                    <part>
                        <partDesc>
                            <p/>
                        </partDesc>
                        <partNumberList>
                            <partNum/>
                        </partNumberList>
                        <partQuantity/>
                        <partNotes/>
                    </part>
                    ...
  </partsList>
*Rendering:*
*My question*
The way I have set the CSS up is generating labels for the elements
rendered as table cells. It's OK, but the better presentation would be
to render a table header. Anyone have suggestions about how to do that?
*CSS*
partsList {
    display:table;
    border:solid
}
part {
    display:table-row
}
partDesc {
   display:table-cell;
   border:solid
}
partNumberList {
   display:table-cell;
   border:solid
}
partQuantity {
   display:table-cell;
   border:solid
}
partNotes {
   display:table-cell;
   border:solid
}
/* Labels for table headers */
*[class~="AMATtask/partDesc"]:before {
  content: "Description";
  font-weight: bold;
  font-size:small;
}
*[class~="AMATtask/partNumberList"]:before {
  content: "Part Number";
  font-weight: bold;
  font-size:small;
}
*[class~="AMATtask/partQuantity"]:before {
  content: "Quantity";
  font-weight: bold;
  font-size:small;
}
*[class~="AMATtask/partNotes"]:before {
  content: "Notes";
  font-weight: bold;
  font-size:small;
}
Many thanks.
Best,
Kris
Kristen James Eberlein
Chair, OASIS DITA Technical Committee
Principal consultant, Eberlein Consulting
www.eberleinconsulting.com
+1 919 622-1501; kriseberlein (skype)
_______________________________________________
oXygen-user mailing list
oXygen-user@oxygenxml.com
https://www.oxygenxml.com/mailman/listinfo/oxygen-user
_______________________________________________
oXygen-user mailing list
oXygen-user@oxygenxml.com
https://www.oxygenxml.com/mailman/listinfo/oxygen-user