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)