React组件中使用Tailwind设置表格圆角失效的解决办法

开发者阿泽

2026-6-30

解决Tailwind React表格圆角不生效的问题

直接给table元素加rounded-lg不生效，核心原因是**border-collapse模式下，表格子元素（thead、tbody、tr、td/th）的边框会覆盖table本身的圆角样式**。以下是快速修复方案：

关键修改步骤

给包裹table的外层div添加rounded-lg和overflow-hidden类，通过容器裁剪内部表格内容，实现整体圆角效果
移除table元素上的rounded-lg类

修改后的完整代码

"use client";

import { useTimeContext } from "@/context/TimeContext";
import formatTime from "@/utils/formatTime";
import { useEffect } from "react";

export default function LapTable() {
  const { stoppedTime, laps, setLaps } = useTimeContext();

  useEffect(() => {
    if (stoppedTime !== 0) {
      setLaps((prevLaps: any) => [...prevLaps, stoppedTime]);
    }
  }, [stoppedTime, setLaps]);

  return (
    <div className="mt-5 mb-10 w-[540px] rounded-lg overflow-hidden">
      <table className="w-full border-collapse border-gray-400 text-center">
        <thead>
          <tr className="bg-gray-200">
            <th className="border border-gray-400 px-4 py-2 w-1/2">Lap</th>
            <th className="border border-gray-400 px-4 py-2 w-1/2">Time</th>
          </tr>
        </thead>
        <tbody>
          {laps.map((lapTime, index) => (
            <tr key={index}>
              <td className="border border-gray-400 px-4 py-2 w-1/2">{index + 1}</td>
              <td className="border border-gray-400 px-4 py-2 w-1/2">{formatTime(lapTime)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}