How to add border radius on table row

Question

Does anyone know how to style tr as we like?

I\'ve used border-collapse on table, after that tr\'s can display 1px solid border I give them.

However, when I\

Answer 1

Not trying to take any credits here, all credit goes to @theazureshadow for his reply, but I personally had to adapt it for a table that has some instead of for it's first row's cells.

I'm just posting the modified version here in case some of you want to use @theazureshadow's solution, but like me, have some in the first . The class "reportTable" only have to be applied to the table itself.:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!