how can i change footable header style?

Question

I'm using footable on a project. When footable generates responsive table it makes th and td s within the same tr. But i want it to seperate th and tds. Let me try to explain with pictures. I want it like that.

But it generates like that:

Basicly i'd like to seperate th and tds with different tr tags.

Is that even possible? Thank you.

Answer 1

Definitely possible and a lot of ways to do it. I'd say quickest way is to bind to the "expand.ft.row" event:

FooTable.init("#element", {
    on: {
        "expand.ft.row": function (e, ft, row) {
            window.setTimeout(function() {
                var detailTRs = row.$el.find(".footable-details > tbody > tr").not(".processed")
                detailTRs.before(function() {
                    return $("<tr>").append($(this).children("th"))
                }).addClass("processed")
            }, 1000);
        },
        "collapse.ft.row": function (e, ft, row) {
            //remove the leftover tr elements we created.
            row.$el.find(".footable-details > tbody > tr").remove()
        }
    }
})