如何用map操作将接口返回的30条数据转为无表头5列表格

不需要拆分数组，直接通过CSS布局结合map遍历就能实现，以下是两种常用方案：

方案1：CSS Grid 实现（推荐） #

利用Grid的自动列布局，直接指定每行5列，遍历所有数据即可自动排列。

React 代码示例 #

const DateGrid = ({ data }) => {
  return (
    <div className="date-grid">
      {data.map((item, index) => (
        <div key={index} className="date-item">
          <div>{item.date}</div>
          <div>{item.day}</div>
        </div>
      ))}
    </div>
  );
};

配套CSS #

.date-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 固定每行5列 */
  gap: 12px; /* 列/行间距，可按需调整 */
  padding: 10px;
}

.date-item {
  text-align: center;
  padding: 8px;
  border: 1px solid #e5e7eb; /* 可选：添加边框模拟表格视觉 */
}

方案2：Flexbox 实现 #

借助Flex的换行特性，给每个子项设置20%宽度（100%/5），自动换行成5列。

React 代码示例 #

const DateFlex = ({ data }) => {
  return (
    <div className="date-flex">
      {data.map((item, index) => (
        <div key={index} className="date-item">
          <div>{item.date}</div>
          <div>{item.day}</div>
        </div>
      ))}
    </div>
  );
};

配套CSS #

.date-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
}

.date-item {
  width: calc(20% - 9.6px); /* 减去gap占比，确保每行刚好5个 */
  text-align: center;
  padding: 8px;
  border: 1px solid #e5e7eb;
}

Bootstrap 适配方案 #

Bootstrap默认是12列布局，col-md-2无法适配5列，可通过自定义宽度解决：

const DateBootstrap = ({ data }) => {
  return (
    <div className="row g-3">
      {data.map((item, index) => (
        <div key={index} className="col" style={{ width: '20%' }}>
          <div>{item.date}</div>
          <div>{item.day}</div>
        </div>
      ))}
    </div>
  );
};

手动设置子项宽度为20%，配合Bootstrap的row和g-3（间距类）即可实现5列布局。

内容的提问来源于stack exchange，提问作者Agent 047