Can we put any tag inside tbody of table element in HTML

Question

I have a very peculiar use case which requires me to use two ng-repeats. One array is of dates and another contains some date in form of associated array with argument as those dates.

<tbody>
    <tr ng-repeat="date in dates">
    <!-- <tr ng-repeat="datum in data[date]"> -->
    <td> {{date}} </td>
    <td> {{datum.carName}} {{datum.regNumber}}</td>
    <td> {{datum.driverName}} </td>
    <td> {{datum.startTime}} </td>
    <td> {{datum.endTime}} </td>
    <td> {{datum.trip.sourceName}}</td>
    <td> {{datum.trip.destinationName}} </td>
    <!-- </tr> -->
    </tr>
</tbody>

Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?

This sounds like you should merge the contents of `data` and `dates` before sticking it in your template view. — Quentin, Jan 15 '16 at 20:14

score 3 · Accepted Answer · edited May 09 '23 at 18:29

3

No, you can't put just any element you want (like a <div>, for example) inside <tbody>. What you can do is repeat <tbody> and then repeat <tr> within each <tbody>

<tbody  ng-repeat="date in dates">    
    <tr ng-repeat="datum in data[date]">

There are no limits on having more than one <tbody>

edited May 09 '23 at 18:29

TylerH

20,799
66
75
101

answered Jan 15 '16 at 20:11

charlietfl

170,828
13
121
150

1

I don't think you can have multiple tbody within a table. I just tried it, it doesn't work. – Saras Arya Jan 15 '16 at 20:14
4

You can have as many `tbody` elements are you like. A table consists of 0-1 thead, 0-1 tfoot and 1 or more tbody. – Quentin Jan 15 '16 at 20:14
1

@SarasArya if it's not working it's because something else is wrong – charlietfl Jan 15 '16 at 20:17
Yes I just harcoded with two tbody's and it works. But when I apply the above solution the table vanishes – Saras Arya Jan 15 '16 at 20:17
I only copied what you had for scope arrays... check your scope – charlietfl Jan 15 '16 at 20:18
1

Yes.. It works Thank you. So the issue was, my second array had no data. That is why the table was blank. – Saras Arya Jan 15 '16 at 20:23

naveen · Answer 2 · 2016-01-15T20:38:10.123

Another way

<table>
    <tbody>
        <tr ng-if="0" ng-repeat-start="date in dates"></tr>
        <tr ng-repeat="datum in data[date]">
            <td> {{date}} </td>
            <td> {{datum.carName}} {{datum.regNumber}}</td>
            <td> {{datum.driverName}} </td>
            <td> {{datum.startTime}} </td>
            <td> {{datum.endTime}} </td>
            <td> {{datum.trip.sourceName}}</td>
            <td> {{datum.trip.destinationName}} </td>
        </tr>
        <tr ng-if="0" ng-repeat-end></tr>
    </tbody>
</table>

This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.

score -3 · Answer 3 · answered Jan 15 '16 at 20:13

-3

You can always other tags inside the td.

<tbody>
  <tr>
    <tr>
      <div>here</div>
      <p>there</p>
    </tr>
  </tr>
</tbody>

answered Jan 15 '16 at 20:13

zazvorniki

3,512
21
74
122

1

No, you cannot. That is invalid HTML and error recovery in browsers generally gives undesirable results. – Quentin Jan 15 '16 at 20:14
@Quentin http://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea – zazvorniki Jan 15 '16 at 20:15
That question is asking about elements inside a `td` not a `tr`. – Quentin Jan 15 '16 at 20:16
You answered with correct text...but code example is wrong – charlietfl Jan 15 '16 at 20:24

Can we put any tag inside tbody of table element in HTML

3 Answers3