Given the following HTML:
<table>
<div>
<tr><td></td></tr>
</div>
</table>
When it is rendered, the div gets moved out like so:
<div>
</div>
<table>
<tr><td></td></tr>
</table>
Why does this happen, and how can I prevent this from happening?
You can't, the first example is invalid html. You can use a <tbody> instead of the <div> however.
A <div> element is not allowed directly within a <table> element. Only table related elements are allowed (<tr> <thead>...).
There's no way to "make this work". Read the HTML specification and form a valid document.
div tag cannot be inside the table like this.
<table>
<div>
<tr><td></tr></td>
</div>
</table>
You can put it inside the td like this.
<table>
<tr><td><div></div></td></tr>
</table>
Related
I'm developing application with Backbone.js
View class returns one element after rendering. It's ok if I use divs or spans.
But problem starts when I start to render objects as tr rows.
One objects should be rendered to 2-3 rows.
So can I use this structure?
<table>
<div>
<tr>...</tr>
<tr>...</tr>
</div>
</table>
divs immediately inside a table tag is invalid. use tbody instead
Yes, it is a very bad idea.
The HTML specification does not allow div elements to be child elements of a table element, so it triggers error recovery routines in browsers.
Given this input:
<table>
<tr><td>1</td></tr>
<div>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</div>
<tr><td>4</td></tr>
<div>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</div>
The DOM that Firefox will generate (and you can see this by using the Inspect Element feature) will look like this:
<div>
</div><div>
</div><table>
<tbody><tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody></table>
Note that the div elements have been removed from the table and placed before it. This makes them useless for manipulating the rows.
HTML provides the thead, tfoot and tbody elements to group table rows. Use the appropriate ones of those instead of div elements (you can have only one thead and only one tfoot, but there are no limits on the number of tbody elements).
That is not valid HTML. You can not nest block or inline elements in a table, only table elements, such as <tbody>, <tr> or <thead>. You can of course nest a <div> in a table cell (<td> or <th>).
For specific css requirements I'm using multiple <tbody> tags in my table design which looks something like this:
Use of multiple tbody tags
But I also require a wrapper for multiple tbody tags (something like a common tbody parent) such that this wrapper can be scrolled in order achieve the following effect:
A common tbody which can be scrolled
How do I achieve the latter srolling effect in the former one?
(P.S.: I know this can be done through nested table approach, but I'm looking for other alternatives if any)
As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:
<table>
<thead>
...
</thead>
</table>
<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>
This solved the issue.
Here's a Working Demo.
You cannot have a wrapper for tbody elements inside a table. The tbody element itself is a wrapper for tr elements. HTML syntax does not allow any other container for tbody but table. What matters more is that this syntax rules is actually enforced by the way browsers parse HTML.
If you try to use, say, a div element as a wrapper (the most reasonable approach), it will actually create a div element in the DOM, but an empty one, and before the table. All the tbody and tr elements are inserted into the table element; they are effectively extracted from the div element, which thus becomes empty, unless it contains something else than table-related elements.
An illustration, using intentionally invalid markup:
<style>
.x { outline: solid red }
</style>
<table>
<tbody>
<tr><td>foo
</tbody>
<div class=x>
FOO!
<tbody>
<tr><td>foo2
</tbody>
<tbody>
<tr><td>foo3
</tbody>
</div>
<tbody>
<tr><td>The end
</tbody>
</table>
The conclusion is that you need a different approach. The most obvious one is to use just a single tbody element. If this is not feasible, you should explain why, but this would be a topic for a new question.
I have the following snippet:
<p>AAA</p>
<div ng-show="files.length == 0">
<p>BBB</p>
<tr class="no-files">
<p>CCC</p>
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>
</div>
It seems like the ng-show is only marking its own div as (in)visible, and not also the contents of that div. In my application, the "there are no files..." message is displayed regardless of the number of elements in files. I expected entire div to be shown/hidden. Have I done something wrong or is this how ng-show works?
In the example above, when the number of files is greater than zero, AAA and CCC are displayed.
Is this the proper behavior or have I done something wrong?
Firstly, I'd say you have invalid HTML. <div>s can't contain table rows. Try removing the wrapper <div> and putting ng-show on the <tr>.
p can't appear in a table outside of a table cell. Neither can div. Use ng-show on the tr element(s) instead.
<tr class="no-files" ng-show="files.length == 0">
<td colspan="2">
<p class="no-files">There are no files to load.</p>
</td>
</tr>
I'm developing application with Backbone.js
View class returns one element after rendering. It's ok if I use divs or spans.
But problem starts when I start to render objects as tr rows.
One objects should be rendered to 2-3 rows.
So can I use this structure?
<table>
<div>
<tr>...</tr>
<tr>...</tr>
</div>
</table>
divs immediately inside a table tag is invalid. use tbody instead
Yes, it is a very bad idea.
The HTML specification does not allow div elements to be child elements of a table element, so it triggers error recovery routines in browsers.
Given this input:
<table>
<tr><td>1</td></tr>
<div>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</div>
<tr><td>4</td></tr>
<div>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</div>
The DOM that Firefox will generate (and you can see this by using the Inspect Element feature) will look like this:
<div>
</div><div>
</div><table>
<tbody><tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody></table>
Note that the div elements have been removed from the table and placed before it. This makes them useless for manipulating the rows.
HTML provides the thead, tfoot and tbody elements to group table rows. Use the appropriate ones of those instead of div elements (you can have only one thead and only one tfoot, but there are no limits on the number of tbody elements).
That is not valid HTML. You can not nest block or inline elements in a table, only table elements, such as <tbody>, <tr> or <thead>. You can of course nest a <div> in a table cell (<td> or <th>).
I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.