How do I add a th element in tbody rows?

Bootstrap Studio Help
1

I recently bought Bootstrap Studio and am using to produce a high-fidelity prototype of a page we sketched out. This is the first time I've used Bootstrap Studio, but I've used Bootstrap 4 several times before.

In the Bootstrap 4 documentation, tables can (and more often than not do) have th elements in tbody rows. th elements in the thead have attribute scope="col", where th elements in the tbody have attribute scope="row". This has been the case since 4.0.

For example, the first table on the Bootstrap documentation for tables is this:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

I cannot figure out how to do this in Bootstrap Studio. There doesn't appear to be an option I can set on a Table Cell to turn it into a th, and if I make a cell inside the thead tr, which produces a th element, and then move it into a tbody tr, it transforms into a td.

How do I produce this?

Thanks

2

You may need to custom code your table.

3

Thanks Printninja. I really hope not. Having to use custom code to produce a table straight from the Bootstrap documentation itself in a tool called Bootstrap Studio would be just plain silly.

4

I would have to agree with cloudbear here, the default Bootstrap has the setup so that there is the ability to add a TH tag within the TBODY tag. Since this is Bootstrap Studio based on Bootstrap, I would think all things Bootstrap should be inherent and able to be done default without any work arounds.

Just observing and confirming that it cannot be done, carry on :P

5

A temporary work around would be to just add scope="row" and change the font-weight to bold to the td. A class of td.myth ? The only difference is the scope and styling that I can see between a th and td. I agree though, add it.

6

I would think all things Bootstrap should be inherent and able to be done default without any work arounds.

like tooltips and toasts ? Remember how long it took for those features

7

haha ya it definitely took a while to get those tooltips and toasts as well. Hopefully this is just something they overlooked or missed and can get in there easily. I wouldn't think this would be something all that hard to manipulate. Just make it not edit what we're doing and that would work. IN other words, make it stop altering the TH to a TD and leave it at whatever we put there. That's how it should be to start with for all things. So many things that are "restricted" yet that shouldn't be.

8

Thanks for bringing it to our attention! One way to solve this is to have separate th and td elements. Alternatively we can make an option in the td settings panel which forces it to be a th. This can also display a scope attribute for easier entry. Which of the two would you find more convenient?

9

Thanks Martin,

I think the most compliant solution is the second option. Here's how I think it should work:

  • The Table Cell item should put a td in the table when added inside a tbody, and a th when added inside a thead.
  • A Header toggle option should be available on all Table Cell items, to toggle the Table Cell between being a th and a td. This should be available to all Table Cell items regardless of whether they're in a thead or tbody.
  • th elements in thead should have scope="col" by default
  • Toggling a Table Cell td element in a tbody over to being a th (by using the Header toggle suggested in the second bulletpoint) should automatically add scope="row" to the th element. Likewise, in a thead this should add scope="col".

Thoughts?

10

What @cl0dbear says sounds about right to me too.