需要帮助和建议来创建一个复杂的表格定位

Question

我想创建一个简单的表，但它的定位非常复杂。我不知道如何管理它。

所以我需要通过Ajax JSON从API中获取数据。然后安排它是这样的：

问题是，有3个JSON，

1. 首先是用户数量
2. 第二个是包名称（即POS 2 x 1 jam 3 bulan，库存3 x 1 jam 3 bulan等等）
3. 第三个，最后一个是价格

这是我的JSON及其格式的示例：

用户数量：

  [[{"id":1,"user_qty":1},
    {"id":2,"user_qty":2},
    {"id":3,"user_qty":5},
    {"id":4,"user_qty":30}]]

数据包名称：

 [[{"id":1,"name":"POS","training":"2 x 1 Jam","maintenance":"3 Bulan"},
    {"id":2,"name":"INVENTORY","training":"3 x 1 Jam","maintenance":"3 Bulan"},
    {"id":3,"name":"POS PLATINUM","training":"3 x 1.5 Jam","maintenance":"3 Bulan"},
    {"id":4,"name":"STANDARD","training":"4 x 1.5 Jam","maintenance":"3 Bulan"}]]

价格

 [[{"id":1,"packet_id":1,"user_qty_id":1,"harga":"2300000"},
    {"id":2,"packet_id":1,"user_qty_id":2,"harga":"3000000"},
    {"id":3,"packet_id":1,"user_qty_id":3,"harga":"4000000"},
    {"id":4,"packet_id":1,"user_qty_id":4,"harga":"6000000"},
    {"id":5,"packet_id":2,"user_qty_id":1,"harga":"4100000"},
    {"id":6,"packet_id":2,"user_qty_id":2,"harga":"5200000"},
    {"id":7,"packet_id":2,"user_qty_id":3,"harga":"6200000"},
    {"id":8,"packet_id":2,"user_qty_id":4,"harga":"8200000"},
    ]]

有人可以帮我解释如何安排吗？如果您感到困惑或有其他意见或想法，请发表评论。

感谢。

Answer 1

你的意思是什么？

＆＃13;

＆＃13;

table {
  background-color:#000;
  color:#fff;
  padding:20px;
  border-collapse:separete;
}
td {padding:10px;}
.trTop td:last-child {text-align:right;}
.trBot td {text-align:right;}

＆＃13;

<table>
  <tr>
    <th>1 user</th>
    <th>2 user</th>
    <th>5 user</th>
    <th>30 user</th>  
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;