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

[Kristen James Eberlein]

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