如何在React项目中用HTML/CSS实现表格横向排列？

核心问题分析 #

你的代码存在两个关键问题导致布局失效：

1. HTML结构不合法：<table>标签的直接子元素只能是<thead>、<tbody>、<tr>这类表格专用标签，你在<table>里嵌套了<div className="slotInfo">，浏览器会自动修正这个错误结构，导致布局混乱。
2. Flex布局作用对象错误：外层.table容器里只有一个<table>元素，所有组合内容都塞在这个表格里，Flex是对容器的直接子元素生效的，单个表格自然无法实现横向排列换行的效果。

修正方案 #

1. 调整JSX结构：每个组合对应独立表格

把原来的单个大表格拆分成每个组合对应一个独立的<table>，让这些表格成为Flex容器的直接子元素：

<div className="tables-container">
  {/* 过滤有效组合并遍历生成表格 */}
  {GetAllCombisInfo().filter(combi => combi.length > 0).map((combi, index) => (
    <table key={index} className="combination-table">
      <thead>
        <tr>
          {/* 表头跨两列，避免布局错乱 */}
          <th colSpan="2">Combination {index + 1}:</th>
        </tr>
      </thead>
      <tbody>
        {combi.map((slot, id) => (
          <tr key={id}>
            <td>{slot.code} {slot.type} {slot.slot_name}:</td>
            <td>{slot.day} from {slot.startTime} to {slot.endTime}</td>
          </tr>
        ))}
      </tbody>
    </table>
  ))}
</div>

注：这里简化了GetAllCombisInfo()的重复调用，直接先过滤再遍历，提升性能的同时让代码更简洁。

2. 修正CSS样式：给Flex容器和表格加基础样式

.tables-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：表格之间的间距 */
  padding: 1rem;
}

.combination-table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  min-width: 300px; /* 可选：设置表格最小宽度，防止被过度压缩 */
  margin-bottom: 1rem; /* 兼容旧浏览器的间距方案 */
}

.combination-table th,
.combination-table td {
  padding: 0.6rem;
  border: 1px solid #ddd;
  text-align: left;
}

.combination-table th {
  background-color: #f5f5f5;
}

效果说明 #

• Flex容器.tables-container会让内部的表格横向排列，当页面宽度不足以容纳所有表格时，自动换行到下一行。
• 规范的表格结构避免了浏览器自动修正DOM导致的布局异常，同时提升了页面的可访问性。
• 可选的min-width可以保证表格不会被压缩得太窄，内容排版更美观。

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