React JS中表格横向滚动失效问题求助

你的问题出在容器宽度设置不合理和表格缺少最小宽度约束，导致移动端无法触发横向滚动。下面是具体修复方案：

修复后的CSS代码 #

.cart-body {
  overflow-x: auto;
  /* 让容器自适应父元素宽度，适配不同屏幕尺寸 */
  width: 100%;
  /* 可选：添加内边距避免滚动条贴边 */
  padding: 0 1rem;
  box-sizing: border-box;
}

.cart-table {
  /* 设置表格最小宽度，确保列不会被过度挤压 */
  min-width: 600px;
  width: 100%;
}

/* 可选：禁止单元格内容换行，强化横向滚动触发条件 */
.cart-table th,
.cart-table td {
  white-space: nowrap;
}

修复说明 #

1. 移除.cart-body的固定width:600px，改用width:100%让容器自适应移动端屏幕宽度，当屏幕宽度小于表格最小宽度时，自动触发横向滚动。
2. 给.cart-table设置min-width:600px，保证表格内容有足够展示空间，不会因屏幕变窄挤压变形。
3. 可选的white-space:nowrap可以防止单元格内文字换行，进一步确保横向滚动的触发逻辑生效。

修改后的完整代码示例 #

JSX部分 #

<div className="cart-body">
  <table className="cart-table w-100">
    <thead>
      <tr>
        <th colSpan={2}>Item</th>
        <th className="price">Price</th>
        <th className="qty">Qty</th>
        <th className="subTotal">Subtotal</th>
      </tr>
    </thead>
    <tbody>
      <tr className="cart-item-info">
        <td>
          <a
            href="#!"
            title="French Pastel Herringbone Tweed"
            className="product-item-photo d-block"
          >
            <img src="/images/img_5562.png" alt="proimage-1" />
          </a>
        </td>
        <td>
          <a href="#!" className="item__name">
            French Pastel Herringbone Tweed
          </a>
        </td>
        <td>
          <span className="price">$27.00</span>
        </td>
        <td>
          <div className="qty">
            <input type="text" defaultValue="3" />
          </div>
        </td>
        <td>
          <span className="subtotal">$81.00</span>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td className="p-0">
          <div className="tblIcons">
            <a href="#!">
              <FontAwesomeIcon icon={faPenToSquare} />
            </a>
            <a href="#!">
              <FontAwesomeIcon icon={faTrash} />
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td colSpan={5}>
          <div className="Subtotal">
            Subtotal: <span>$81.00</span>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

CSS部分 #

.cart-body {
  overflow-x: auto;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.cart-table {
  min-width: 600px;
  width: 100%;
}

.cart-table th,
.cart-table td {
  white-space: nowrap;
}

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