Question

I have two tables in a page like this:

<table style="width:800px">
    <tr>
        <td style="width:400px;">
            <table id="currencies"
                style="border-spacing: 5px; padding: 3px; margin: 2px" />
        </td>
        <td style="width:400px;">
            <table id="changers"
                style="border-spacing: 5px; padding: 3px; margin: 2px" />
        </td>
    </tr>
</table>

I use jqgrid to extend these. One is the master table while the other is the detail. The problem however is the second table (id = “changers”) is not being displayed in the page. I inspected the javascript from the browser and it has only one <td> element within the table row. This problem goes away if I put them in separate tables like so:

<table id="currencies"
                style="border-spacing: 5px; padding: 3px; margin: 2px" />
<table id="changers"
                style="border-spacing: 5px; padding: 3px; margin: 2px" />

I’m totally stuck on this. Any help is appreciated.

Answer 1

Your two nested table tags aren’t closed. The <tag/> form is not a shorthand form of <tag></tag>, it’s purely for void elements like <br/> that don’t ever have markup content (and also for foreign elements, details in the spec), and you only need the solidus (/) in XHTML (which I recommend avoiding unless you have a very specific need to use it, XHTML is fraught with peril and misconception).

Explicitly close the tables with <table ...></table> rather than <table .../>:

<table style="width:800px">
    <tr>
        <td style="width:400px;">
            <table id="currencies"
                style="border-spacing: 5px; padding: 3px; margin: 2px"></table>
        </td>
        <td style="width:400px;">
            <table id="changers"
                style="border-spacing: 5px; padding: 3px; margin: 2px"></table>
        </td>
    </tr>
</table>