如何用HTML和CSS让表格横向并排并超出屏幕无限延伸而非上下堆叠

问题核心 #

你当前的表格上下堆叠是因为<table>是块级元素，默认会独占一行，外层容器用display: block也无法改变这个布局行为，所以需要调整容器和表格的布局属性，实现横向排列+超出滚动。

解决方案 #

1. 修改外层容器样式 #

把外层容器的display从block改为flex，同时保留overflowX: scroll，这样容器内的子元素会默认横向排列，超出容器宽度时触发横向滚动：

<div style={{ display: "flex", overflowX: "scroll", gap: "16px" }}>

• gap: "16px"是可选配置，用来给表格之间增加间距，提升可读性。

2. 固定表格宽度（可选） #

如果希望表格保持自身宽度不被压缩，可以给每个<table>添加flex-shrink: 0的样式，确保表格不会因为容器空间不足而缩小：

<table style={{ flexShrink: 0, borderCollapse: "collapse" }}>

• borderCollapse: "collapse"是可选配置，用来合并表格边框，让样式更整洁。

修改后的完整代码示例 #

<div style={{ display: "flex", overflowX: "scroll", gap: "16px" }}>
  {wrestlersGrades.length
    ? wrestlersGrades.map((wrestler) => {
        return (
          <table key={wrestler.id} style={{ flexShrink: 0, borderCollapse: "collapse", border: "1px solid #ddd" }}>
            <thead>
              <tr>
                <WrestlerTableHeader wrestler={wrestler} />
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
              </tr>
              <tr>
                <td>This is America</td>
                <td>Hello </td>
                <td>United States of America</td>
                <td>This is America</td>
                <td>Hello </td>
                <td>United States of America</td>
                <td>This is America</td>
                <td>Hello </td>
                <td>United States of America</td>
              </tr>
            </tbody>
          </table>
        );
      })
    : null}
</div>

• 注意给每个表格添加key属性，符合React列表渲染规范。

原理说明 #

• display: flex让容器内的子元素（表格）横向排列，打破块级元素独占一行的默认行为；
• overflowX: scroll确保容器宽度不足时，显示横向滚动条；
• flex-shrink: 0防止表格被压缩，保证每个表格的完整宽度。

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