<...">
Clever Geek Handbook

How to display the remaining table in a "DIV within a table" table?

Below is the structure of the 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 create the remaining lines and insert them using:

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

But when the table is displayed: jumps out of the Table tag and sits above the table tag. The tool is created by a dynamically created table above the table / header. Any suitable way to achieve this inside a div?

+3


source to share


3 answers


You cannot have div

directly inside table

like this. Tables can only contain:

  • Additionally <caption>

    .
  • More than zero <colgroup>

    .
  • Optional <thead>

    .
  • Optional <tfoot>

    .
  • Zero or more <tbody>

    , or zero or more <tr>

    (which are treated as being in one implicit <tbody>

    .

Since HTML 5, <tfoot>

it can also appear at the end rather than before the first <tbody>

.



<div>

is not on this list, and when you put it, the browser does its best to render both the div and the table, exposing it outside of the table. However, there is no reason why you cannot:

<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>
+2


source


I don't know what a colgroup is, but as far as your jQuery is concerned, you should add it to the table without changing the html div_report. if your table is in your report div - add it like so:



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


source


You can create 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/

0


source






More articles:


All Articles