The following is a code sample of a table component I was playing with

import csstype.BorderCollapse.Companion.collapse
import kotlinx.css.border
import react.*
import react.dom.*
import styled.*

external interface BidTableProps : PropsWithChildren {
    var b: List<MyProps>
}
val TableComponent = functionComponent<MyProps> { props ->
    p {
         "Table below"
    }
    styledTable {
        css {
            border = "1px solid black"
            collapse
        }
        styledThead {
            tr {
                th {  "a_header" }
                th {  "b_header" }
                th {  "c_header" }
            }
        }
        tbody {
            for (b in props.obj) {
                tr {
                    td {  b.a.toString() }
                    td {  b.b }
                    td {  b.c }

                }
            }
        }
    }
    p {
         "Table above"
    }
}

I see an enclosing box around the table but the cells are not divided or the border is not applied to the cells. How do I apply the border correctly to all cells of the table? Bonus: Any good documentation on using kotlin-styled wrapper?

kotlin-styled -> https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-styled

CodePudding user response：

As said @Михаил-Нафталь mentioned above adding the following to the css block does the job

css {
    descendants( "th", "td") {
        border = "1px solid black"
    }
    borderCollapse = BorderCollapse.collapse
}