フォーマット配列値を4x3テーブルに変換

Question

4x3テーブル形式で表示できる場所に配列値を配置したい。

どうすればよいですか？

この

は、これは私のテーブル本体である

$("#viewcase").append("<td><img src='" + serverURL() 
     + "/images/"+ arr[i].Case_Pic + "' height='100'>" 
     + "<td>" + arr[i].CaseTime + "</a></b></td>"); 

私の配列の断片である

<table data-role="table" data-mode="reflow" class="uiresponsive" id="MyTable"> 
     <tr> 

     <tbody id="viewcase"> 
     </tr> 

     </tbody> 
</table> 

これは私のアライメントが今以下

Current Alignment

Answer 1

があるように見える方法です単純なCSSとHTMLを使った例。

.tile-table { 
 
    border-collapse: collapse; 
 
    border-width: 0px; 
 
} 
 
.tile-table td { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.tile { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=60&txt=TheAwesomePic&w=400&h=300"); 
 
    background-position: 0px 0px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: local; 
 
}

<table class="tile-table"> 
 
    <tr> 
 
    <td> 
 
     <div class="tile" style="background-position: -0px -0px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -100px -0px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -200px -0px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -300px -0px;"></div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="tile" style="background-position: -0px -100px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -100px -100px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -200px -100px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -300px -100px;"></div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="tile" style="background-position: -0px -200px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -100px -200px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -200px -200px;"></div> 
 
    </td> 
 
    <td> 
 
     <div class="tile" style="background-position: -300px -200px;"></div> 
 
    </td> 
 
    </tr> 
 
</table>