将数组值格式化为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>