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

Thu, 22 Mar 2018 09:29:50 -0700

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
[email protected]
https://www.oxygenxml.com/mailman/listinfo/oxygen-user

Reply via email to