HTML 表没有溢出其容器

Question

我试图让 html 表溢出其容器，以便在移动设备上有滚动条，但它不起作用。

这是代码：

export default function Stats({ pokemon }: { pokemon: PokemonWithColor }) {
    const { stats, name, color } = pokemon;
    const sum = stats.reduce((sum, stat) => sum + stat.base_stat, 0),
        average = sum / stats.length;

    const pokemonColors = colors[color];
    return (
        <div className="w-full overflow-x-auto">
            <table
                className={`w-full border-collapse border ${pokemonColors.lightBorder} text-left`}
            >
                <caption className="sr-only">{name}&apos;s stats</caption>
                <thead
                    className={
                        pokemonColors.lightBg +
                        " border-b" +
                        pokemonColors.lightBorder
                    }
                >
                    <tr>
                        <th scope="col" className="px-2 py-1">
                            Stat
                        </th>
                        <th scope="col" className="px-2 py-1">
                            Bar
                        </th>
                        <th scope="col" className="px-2 py-1">
                            Value
                        </th>
                        <th scope="col" className="px-2 py-1">
                            Max
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {stats.map((s, i) => {
                        return (
                            <tr
                                key={s.stat.name}
                                className={
                                    i % 2 === 0 ? pokemonColors.lighterBg : ""
                                }
                            >
                                <th
                                    scope="row"
                                    className="whitespace-nowrap px-2 py-1 capitalize"
                                >
                                    {s.stat.name.replaceAll("-", " ")}
                                </th>
                                <td className="w-full min-w-[250px] px-2 py-1">
                                    <div
                                        className="h-4 rounded bg-black"
                                        style={{
                                            width:
                                                Math.round(
                                                    (s.base_stat /
                                                        pokemonSharedValues.maxStat) *
                                                        100,
                                                ) + "%",
                                        }}
                                    ></div>{" "}
                                </td>
                                <td className="px-2 py-1">{s.base_stat}</td>
                                <td className="px-2 py-1">
                                    {pokemonSharedValues.maxStat}
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
                <tfoot className={pokemonColors.lightBg}>
                    <tr className={"border-t " + pokemonColors.lightBorder}>
                        <th scope="row" className="px-2 py-1">
                            Average
                        </th>
                        <td className="w-full min-w-[250px] px-2 py-1">
                            <div
                                className="h-4 rounded bg-black"
                                style={{
                                    width:
                                        Math.round(
                                            (average /
                                                pokemonSharedValues.maxStat) *
                                                100,
                                        ) + "%",
                                }}
                            ></div>
                        </td>
                        <td className="px-2 py-1">{average.toFixed(1)}</td>
                        <td className="px-2 py-1"></td>
                    </tr>
                    <tr>
                        <th scope="row" className="px-2 py-1">
                            Total
                        </th>
                        <td className="w-full min-w-[250px] px-2 py-1"></td>
                        <td className="px-2 py-1">{sum}</td>
                        <td className="px-2 py-1"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    );
}

表格似乎只是缩放整个页面以适应其宽度（抱歉，如果您不理解它，我不知道描述它的最佳方式）。真的很奇怪。我尝试了很多方法，但都没有使表格溢出并出现滚动条。

我想要实现的目标可以在这里看到：pokemondb 皮卡丘页面。向下滚动到基本统计表并调整窗口大小。当屏幕足够小时，您可以看到出现滚动条。

我什至尝试复制他们所做的事情，但效果并不好。我不明白这里有什么不起作用。我测试了表格的响应能力，当表格达到表格单元格的最小宽度开始产生影响的程度时，表格似乎会缩放整个页面以适应其宽度。

Answer 1

您似乎遇到了使 HTML 表格在移动设备上可滚动的问题。根据您的代码，您似乎已经在容器 div 上设置了

overflow-x-auto

，当表格超出其宽度时，这应该会触发水平滚动条。但是，您提到表格正在缩放整个页面。

需要检查的一件事是表格单元格的宽度计算（带有

td

的

min-w-[250px]

元素）。有时，固定宽度或最小宽度会影响表格的响应方式。

要实现与您提到的 PokémonDB 页面类似的行为（其中滚动条出现在较小的屏幕上），您可能需要确保以下内容：

1. 确保您的桌子的容器 (

   <div className="w-full overflow-x-auto">

   ) 直接包桌子了
2. 仔细检查是否存在可能覆盖滚动条行为的冲突 CSS 规则。
3. 考虑使用开发人员工具模拟移动设备来测试不同视口大小的表格行为。

如果问题仍然存在，您还可以尝试暂时简化表结构以隔离问题。 如果您需要进一步帮助，请随时提供更多详细信息或代码片段。

祝你有美好的一天<3。