Table header background overlaps border when rounded

[Tomh94]

Hello,

Edit: I am using <oXygen/> XML Editor 26.0, build 2023111306 and using the DITA Map PDF - based on HTML5 & CSS scenario

I encounter a problem when attempting to round the borders of tables. I have a blue background in the table header. Unfotunately I get the following output when I try to round the border:

tableborder.png

#1 shows the blue background overflowing. #2 is what I want the upper corners to look like.

The CSS that styles the tables:

Code: Select all

/* table entry border color */
*[class~="topic/entry"] {
    border-color: #CED5DD;
    font-size: inherit;
    padding-left: 10px;
    padding-right: 10px;
    /* background-color: #E5BE01; */
}

/* table header */
*[class~="topic/thead"] {
    color: white;
    background-color: #023A4F;
}

/* align table header text to the left */
th {
    text-align: left;
    
}

/* general table styling */
*[class~="topic/table"] {
    border: #CED5DD 1px solid;
    border-radius: 5px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background-color: burlywood;

I have experimented with the overflow, z-index and background-clip properties in the topic/table class itself and th, topic/thead and topic/entry classes but nothing seems to work.

What am I missing?

Thanks in advance

Edit2: It should be noted that in the generated <file_name>.merged.html the output is as I want it:

afbeelding.png

[andrei_pomacu]

Hi,
Happy new year!

You need to define a border and a border radius to round the the first and the last cell of the thead.
Here's a handy CSS snippet:

Code: Select all

*[class ~= "topic/thead"] > *[class ~= "topic/row"] > *[class ~= "topic/entry"]:first-child{
    border-top-left-radius: 4px;
    border: #023A4F 2px solid;
} 

*[class ~= "topic/thead"] > *[class ~= "topic/row"] > *[class ~= "topic/entry"]:last-child{
    border-top-right-radius: 4px;
    border: #023A4F 2px solid;
} 

Regards,
Andrei

[Tomh94]

Hi Andrei,

Happy new year to you too!

With a bit of tweaking I was able to fix my problem with your solution, cheers!