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

Oxygen XML Editor Support (Radu Coravu) support at oxygenxml.com
Fri Mar 23 06:32:28 CDT 2018


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 at oxygenxml.com
> https://www.oxygenxml.com/mailman/listinfo/oxygen-user
>


More information about the oXygen-user mailing list