element 表格 一组数据两行展示

如果您想要在表格中实现一组数据按两行显示，您可以使用CSS来控制表格行的显示方式。以下是一个简单的HTML和CSS示例，演示了如何实现这一需求：

HTML:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <!-- 重复以上两行，按需显示更多组数据 -->
  </tbody>
</table>

CSS:

table {
  border-collapse: collapse;
  width: 100%;
}
 
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
 
/* 这里是关键CSS，使得每组数据显示为两行 */
tr:nth-child(odd) {
  background-color: #f2f2f2; /* 可选的背景色 */
}
 
tr:nth-child(even) {
  background-color: #fff; /* 可选的背景色 */
}

在这个示例中，我们使用CSS的:nth-child选择器来为表格的行设置交替的背景色，从而实现每组数据两行显示的效果。您可以根据需要调整CSS样式。