Javascript 如何使数据表看起来像网格？

我正在尝试创建一个网格，其中包含一系列产品，如下面的Datatables

但每行仅显示一张卡。如何使它看起来像网格，每行只有3张卡

HTML

<table id="products_table" class="table is-indent tablesaw" cellspacing="0" width="100%" style="font-size: medium;">
  <thead>
    <tr>
      <th class="cell-600" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3" style="font-weight: 600;">Product Name</th>
    </tr>
  </thead>
</table>

品名

JS

function loadClick() {
  var row = "";
  t.row.add(['<td><div class="demo-card-wide mdl-card mdl-shadow--2dp"><div class="mdl-card__actions mdl-card--border">' + name +  '</div></div></td>'])
    .node().id = ProductID;

  t.draw(false);
  $("#products_table_processing").css("visibility", "hidden");
}

$(document).ready(function () {
  var table = $('#products_table').DataTable({
    "processing": true,
    "language": {
      "processing": "<img src='http://i.imgur.com/G6ZMC0N.gif' >"
    }
  });
  $("#products_table_processing").css({ "display": "block", "z-index": 10000 })

  loadClick();
});

函数加载单击（）{
var行=”；
t、 行添加（[''+名称+''））
.node（）.id=ProductID；
t、 抽签（假）；
$（“#产品#表#处理”）.css（“可见性”、“隐藏”）；
}
$（文档）.ready（函数（）{
变量表=$（“#产品表”）。数据表({
“处理”：对，
“语言”：{
“处理”：”
}
});
$（“#产品#表格(处理”）.css（{“显示”：“块”，“z索引”：10000}）
loadClick（）；
});

注意：

---

如果不能使用datatables完成。那么请给我建议另一种方法。但是我需要搜索和分页选项。

那么，你不能用CSS的网格系统来定义这3列吗？如果出现溢流，它会自动转到新行。希望这有帮助。我真的很想看到一个水平行的

：）你的建议打破了术语“表”的任何意义，即使你可以用CSS（可能只在一部分阅读器中工作）将其破解，那么它肯定不会与dataTables一起工作。我认为您应该找到一个插件，它实际上构建了一个水平网格，这似乎是一个显而易见的解决方案，而不是与可排序表的基本概念相冲突的

和dataTables。