CODEWITHSUNDEEP
javascriptjqueryhtmlcss
fatherazrael
fatherazrael

Reputation: 5987

How to display remaining table in a 'DIV inside table'?

Following is structure of table with Colgroup:

<div class="pure-g">
  <table border='0' style='width: 100%;' class='pure-table pure-table-bordered'>
    <colgroup>
      <col width='10%'>
      <col width='82%'>
      <col width='20%'>
    </colgroup>
    <tr>
       <th>Nr</th>
      <th>Question</th>
      <th>Status</th>
    </tr>
    <div id="Report"> //Here i will display remaining table
    </div>
  </table>
</div>

In Javascript, I am creating remaining rows and inserting it using:

$('#Report').html(tableStructure);

But when table is displayed: jumps out from Table tag and sits above table tag. Means dynamically created table is created above table/heading. Any suitable way to achieve that inside div only?

Upvotes: 3

Views: 282

Answers (3)

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

You can develop a structure like this:

<div class="pure-g">
    <table border='0' style='width: 100%;' class='pure-table pure-table-bordered'>
        <colgroup>
            <col width='10%'>
            <col width='82%'>
            <col width='20%'>
        </colgroup>
    <tr>
        <th>Nr</th>
        <th>Question</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>
            <div id="Report"></div>
        </td>
    </tr>
</table>
</div>

jFiddle

Updated:

HTML

<div class="pure-g">
        <table border='0' style='width: 100%;' class='pure-table pure-table-bordered'>
            <colgroup>
                <col width='10%'>
                <col width='82%'>
                <col width='20%'>
            </colgroup>
        <tr>
            <th>Nr</th>
            <th>Question</th>
            <th>Status</th>
        </tr>
        <tr>
            <td colspan="3">
                <div id="Report"></div>
            </td>
        </tr>
    </table>
    </div>

Javascript

var tablerStructure = "<table style='width=100%'><tr>";
$("colgroup col").each(function() {
    tablerStructure += "<td width='" + $(this).width() + "'>This table structure is inserted via javascript</td>";
});
tablerStructure += "</tr></table>";
$('#Report').append(tablerStructure);

css

#Report {
    width: 100%
}
#Report table {
    width: 100%;
}

Demo: http://jsfiddle.net/466h7a26/1/

Upvotes: 0

Jon Hanna
Jon Hanna

Reputation: 113322

You can't have a div directly inside a table like this. Tables can only contain:

  1. Optional <caption>.
  2. Zero of more <colgroup>.
  3. Optional <thead>.
  4. Optional <tfoot>.
  5. Zero or more <tbody>, or else zero or more <tr> (which are treated as being in a single implicit <tbody>.

As of HTML 5, <tfoot> can also appear at the end, instead of before the first <tbody>.

<div> is not in that list, and when you put one there the browser did the best it could in rendering both the div and the table, in putting it outside the table. However, there's no reason why you can't do:

<div class="pure-g">
  <table border='0' style='width: 100%;' class='pure-table pure-table-bordered'>
    <colgroup>
      <col width='10%'>
      <col width='82%'>
      <col width='20%'>
    </colgroup>
    <thead>
      <tr>
        <th scope="col">Nr</th>
        <th scope="col">Question</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody id="Report"> //Here i will display remaining table
    </tbody>
  </table>
</div>

Upvotes: 2

eskimomatt
eskimomatt

Reputation: 185

I've no idea about colgroup, but as for your jQuery, you should be appending to the table, not changing the html of the #report div. assuming your table is within your report div - append it like thus:

$('#Report>table').append(tableStructure);

Upvotes: 0

Related Questions