jqGridが画面レイアウトで正しく整列しません。何が欠けている？

Question

以下の例では、3つのjqグリッドが正しく整列しません。私は次のようにHTML部分を作成しました：

<div> 
    <h1>Grid 1</h1> 
    <table id="Grid1"/> 
</div> 

<div> 
    <h1>Grid 2</h1> 
    <table id="Grid2"/> 
</div> 

<div> 
    <h1>Grid 3</h1> 
    <table id="Grid3"/> 
</div> 

JavaScriptの完全なコードを以下のスニペットで試すことができます。 ここでページを見ている方法は次のとおりです。

私はそれが

タイトル1
のように現れるだろうと期待していGRID1
が タイトル2
Grid2
タイトル3
グリッド3

ただし、上記のスクリーンショットのように混同されることはありません。私も<span>と同じように試しました。グリッド間に<br/>を挿入し、height属性を持つstyle属性を追加しました。すべて成功しませんでした。

どのようにこれを修正できますか？助けてください。それを試してみる

コードスニペット：

// see: https://free-jqgrid.github.io/getting-started/ 
 
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid 
 
$(function() { 
 
    var gridSampleData = [ 
 
     { id: 10, firstName: "Jane", lastName: "Doe1"}, 
 
     { id: 20, firstName: "Justin", lastName: "Time" } 
 
    ]; 
 
    $("#Grid1").jqGrid({ 
 
    autowidth: true, height: 45, 
 
    colModel: [{name: "firstName"}, {name: "lastName"}], 
 
    data: gridSampleData 
 
    }); 
 
    $("#Grid2").jqGrid({ 
 
    autowidth: true, height: 45, 
 
    colModel: [{name: "firstName"}, {name: "lastName"}], 
 
    data: gridSampleData 
 
    }); 
 
    $("#Grid3").jqGrid({ 
 
    autowidth: true, height: 45, 
 
    colModel: [{name: "firstName"}, {name: "lastName"}], 
 
    data: gridSampleData 
 
    }); 
 
});

<meta charset="utf-8"/> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
<title>Canonical jqGrid example</title> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script> 
 

 
    <div> 
 
     <h1>Grid 1</h1> 
 
     <table id="Grid1"/> 
 
    </div> 
 

 
    <div> 
 
     <h1>Grid 2</h1> 
 
     <table id="Grid2"/> 
 
    </div> 
 

 
    <div> 
 
     <h1>Grid 3</h1> 
 
     <table id="Grid3"/> 
 
    </div>

Answer 1

あなたのHTMLテーブルの定義が正しくありません。テーブルの終了タグはDIVタグを閉じると解釈される - このようなあなたのhtmlを修正し、問題を修正するために：あなたはちょうどそれらが正しい場所になりたいと思った場合

<div> 
    <h1>Grid 1</h1> 
    <table id="Grid1"></table> 
</div> 

<div> 
    <h1>Grid 2</h1> 
    <table id="Grid2"></table> 
</div> 

<div> 
    <h1>Grid 3</h1> 
    <table id="Grid3"></table> 
</div>