React组件中Table超出容器div时overflow-x属性失效问题

问题描述 #

我正在开发一个React组件，用于展示带指定表头的表格。核心问题是：当表格宽度超出容器div的最大宽度时，overflow-x属性未生效，表格直接超出容器显示，没有出现横向滚动条。使用Tailwind CSS进行样式开发，组件代码如下：

export const PlantServiceOrders = () => {
  return (
    <div className='w-full bg-white mb-6 shadow-lg rounded'>
      <div className='w-full p-4'>
        <h3>待完成服务工单</h3>
      </div>
      <div className='max-w-full overflow-x-scroll'>
        <table className='w-full border-collapse'>
          <thead>
            <tr className='[&>*]:px-6 [&>*]:bg-gray-100 [&>*]:text-gray-500 [&>*]:border [&>*]:border-solid [&>*]:border-gray-200 [&>*]:py-3 [&>*]:text-xs [&>*]:uppercase [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:whitespace-no-wrap [&>*]:font-semibold [&>*]:text-center'>
              <th>工单编号</th>
              <th>工厂</th>
              <th>客户</th>
              <th>零件编号</th>
              <th>零件名称</th>
              <th>故障</th>
              <th>联系人</th>
              <th>邮箱</th>
              <th>电话</th>
              <th>开始日期</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr className='hover:bg-gray-200 [&>*]:border-t-0 [&>*]:px-6 [&>*]:align-middle [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:text-xs [&>*]:whitespace-no-wrap [&>*]:p-4'>
              <td>XXXXXXX</td>
              <td>XXXXX</td>
              <td>XXXXX XXXXXX XXXX XX XXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXXX XXXX XXXXXXX </td>
              <td>XXXXXX XX XXXXX </td>
              <td>XXXXXX XXXXX </td>
              <td>XXXXXXXXXXXXXXXXXXXXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXX-XX-X </td>
              <td>
                <button className='text-white text-md bg-green-600 hover:bg-green-700 rounded-lg py-2 px-4 cursor-pointer font-semibold'>
                  完成
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}

解决方案 #

问题根源是表格会自动收缩内容以适应容器宽度，导致无法触发外层容器的滚动。调整以下两点即可解决：

1. 给表格设置最小宽度 #

给表格添加min-w-[900px]（数值可根据实际内容调整），强制表格在内容总宽度超过容器时保持自身宽度不收缩，触发外层容器的溢出滚动。

2. 优化滚动容器样式 #

将overflow-x-scroll替换为overflow-x-auto，在内容未超出容器时不显示滚动条，提升视觉体验。

修改后的代码 #

export const PlantServiceOrders = () => {
  return (
    <div className='w-full bg-white mb-6 shadow-lg rounded'>
      <div className='w-full p-4'>
        <h3>待完成服务工单</h3>
      </div>
      <div className='max-w-full overflow-x-auto'>
        <table className='w-full min-w-[900px] border-collapse'>
          <thead>
            <tr className='[&>*]:px-6 [&>*]:bg-gray-100 [&>*]:text-gray-500 [&>*]:border [&>*]:border-solid [&>*]:border-gray-200 [&>*]:py-3 [&>*]:text-xs [&>*]:uppercase [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:whitespace-nowrap [&>*]:font-semibold [&>*]:text-center'>
              <th>工单编号</th>
              <th>工厂</th>
              <th>客户</th>
              <th>零件编号</th>
              <th>零件名称</th>
              <th>故障</th>
              <th>联系人</th>
              <th>邮箱</th>
              <th>电话</th>
              <th>开始日期</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr className='hover:bg-gray-200 [&>*]:border-t-0 [&>*]:px-6 [&>*]:align-middle [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:text-xs [&>*]:whitespace-nowrap [&>*]:p-4'>
              <td>XXXXXXX</td>
              <td>XXXXX</td>
              <td>XXXXX XXXXXX XXXX XX XXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXXX XXXX XXXXXXX </td>
              <td>XXXXXX XX XXXXX </td>
              <td>XXXXXX XXXXX </td>
              <td>XXXXXXXXXXXXXXXXXXXXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXX-XX-X </td>
              <td>
                <button className='text-white text-md bg-green-600 hover:bg-green-700 rounded-lg py-2 px-4 cursor-pointer font-semibold'>
                  完成
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}

说明 #

• whitespace-nowrap（替换原代码中旧版Tailwind语法whitespace-no-wrap）确保单元格内容不换行，保证表格宽度足够触发溢出。
• 最小宽度数值可根据实际表头和内容长度调整，确保所有内容能完整显示时触发滚动。

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