Question

以下是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>

在Javascript中，我正在创建剩余的行并使用以下命令插入：

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

但是当显示表格时：从表格标签中跳出并位于表格标签上方。在表/标题上方创建表示动态创建的表。是否有任何合适的方法来实现内部div？

Answer 1

您不能在此div内直接使用table。表格只能包含：

可选<caption>。
零<colgroup>。
可选<thead>。
可选<tfoot>。
零个或多个<tbody>，或零个或多个<tr>（被视为单个隐式<tbody>。

从HTML 5开始，<tfoot>也可以在最后显示，而不是在第一个<tbody>之前。

<div>不在该列表中，当你把它放在那里时，浏览器在渲染div和表时尽力做到最好，把它放在表外。但是，你没有理由不这样做：

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

Answer 2

我不知道colgroup，但是对于你的jQuery，你应该追加到表中，而不是改变#report div的html。假设你的表在你的报告div中 - 如下所示追加它：

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

Answer 3

你可以开发这样的结构：

<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

<强>更新

<强> 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%;
}

演示：http://jsfiddle.net/466h7a26/1/

如何在表格中显示剩余的表格＆＃39;？

3 个答案: