Dynamically changing rowSpan

[RudmanMario]

I have a problem when trying to update my table. This is how my initial table looks like:

So the rowspan here works fine. My "Row" table cell looks like this:

<th className="rotate header" rowSpan={this.props.tableFoo.axisY.ordinates.length}><div><span>Row</span></div></th>

So I'm looking for the length of ordinates array for axis Y and that is the number of rows which I want my "Row" cell to cover.
Then when user clicks "Add new Y ordinate", a new ordinate is pushed and table re-renders. This is the end result:

So for some reason, although the rowspan changes to 4 and I can see that when inspecting elements, for some reason the table cell spans only across 3 rows. Why is that? Is it a bug?
I made a fiddle so you can see the problem.

[syranide]

Put <tbody> in your <table> and it will work (i.e. <table><tbody>).

@zpao Yet another reason to drop the optimistic traversal if you ask me (perhaps something like #2262)

[sophiebits]

@syranide In master we now have a warning, at least.

[syranide]

@spicyj Fantastic :)

[RudmanMario]

Thanks for the help. It is an easy fix, but I would probably never found out about it on my own. I think there should be a warning of some sort about including <tbody> in table (or maybe there is somewhere in documentation but I haven't noticed it).

[sophiebits]

@RudmanMario That's what I meant by my comment, sorry for being unclear – in the next release we'll warn you explicitly and suggest adding a tbody tag.