Question

如：

item 1, item 2, item 3, item 4, item 5
item 6, item 7, item 8, item 9, item 10
item 11, item 12, item 13, item 14, item 15

.....

它就像一个矩阵，但是所有项都来自同一个组，而不像普通表，其中列表示每行上数据的不同属性。我需要实现上一页，下一页

Answer 1

您正在寻找CSS网格：

＆＃13;

<div class="matrix">
  <span>item 1</span>
  <span>item 2</span>
  <span>item 3</span>
  <span>item 4</span>
  <span>item 5</span>
  <span>item 6</span>
  <span>item 7</span>
  <span>item 8</span>
  <span>item 9</span>
  <span>item 10</span>
  <span>item 11</span>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

要确保每个列都具有相同的属性，只需为它们提供相同的类并更改类。

这样每个元素将共享该类的相同属性。

例如，在这里，您可以以任何方式编辑.column属性，它将影响所有列

.column {
  width: 20%;
}

<table>
  <tr>
    <th class="column">Product</th>
    <th class="column">Description</th>
    <th class="column">Price</th>
  </tr>
  <tr>
    <td>Table</td>
    <td>Something to put things on</td>
    <td>$400</td>
  </tr>
  <tr>
    <td>Chair</td>
    <td>A thing that  you sit on</td>
    <td>$30</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>Budget computer monitor</td>
    <td>$140</td>
  </tr>
</table>

如何创建一个包含所有具有相同属性的列的表？

2 个答案: