Table header is a locked component in Bootstrap studio and it does not allow adding rows into thead. This should be allowed, no rules against it. Currently, table header with two rows is a mission impossible (except converting the entire table to HTML).
I believe semantically there is only 1 THEAD Row. The BSS app is about building semantic bootstrap sites so I don't see that they are going to change that.
You can always build your table with everything in it then at the end convert it HTML to make that change at the end.
Saj
Thanks Saj. Could you please reference the rule of just one row in THEAD. I have searched for this rule, but with no success.
According to W3C: The thead element represents the block of ROWS that consist of the column labels (headers) for the parent table element, if the thead element has a parent and it is a table. Ref - https://dev.w3.org/html5/spec-preview/the-thead-element.html#the-thead-element
Now, I know I can turn anything into Custom HTML, but then I lose editing options for which I use Bootstrap studio in the first place.
After checking that, I'll have to agree with you on that point. I haven't used a table in a very long time so I'm behind on that. As long as the table has a thead and tbody you should be semantic as long as the use of the other rows in the thead are like the spec describes, "...the first row is the headers, and the second row is an explanation of how to fill in the table." If in the end it doesn't read that way then you've kind of thrown out being semantic.
Should you be able to make additional thead row(s), yes.
The thing that is really getting me is that the Bootstrap Dev's aren't even following the spec and the semantics of TABLES as their use of caption and tfoot are not where they should be. I understand that the Bootstrap Studio Dev's are just following along what the Bootstrap Dev's have layed out, but maybe in certain circumstances the spec should be more followed then what the framework is putting out.
At least one of the things is that there should be an option to place the caption at the top and stuff like that.
Saj
Hi... I just wanted to see if anyone has a solution (beyond using custom HTML) to create a grouped column header in Bootstrap Studio (like in the code below, which is right from: Grouped Column Header)? Currently, it appears there in no way in Bootstrap Studio to add a second table row to the table header (even though it appears to be common practice for this type of header).
Thanks, Mark
<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-show-columns="true" data-url="json/data1.json"> <thead> <tr> <th colspan="2">Item Detail</th> <th data-field="id" rowspan="2" data-valign="middle">Item ID</th> </tr> <tr> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table>
I support this feature - Grouped Column Header, how can we make this possible for devs to implement to BS?