Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Rounded corners to table using tailwind

I want to add rounded corners to my table in a react component using tailwind. I have tried using rounded-lg or any other rounded class to the component but it isn’t working. What can I do?

"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]">
      <table className="w-full border-collapse border-gray-400 text-center rounded-lg">
        <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>
  );
}
Tags:

2

Answers


  1. 0

    You can additionally add border outline outline-1 outline-gray-400 overflow-hidden classes to make this work

    <table className="w-full border-collapse border outline outline-1 outline-gray-400 overflow-hidden text-center rounded-lg">
  ...
</table>
    Login or Signup to reply.
  2. 0

    Since your table has a border, It will not give the desired effect by simply adding the rounded-lg to the <table>. To clip the border to rounded corners, you will have to use overflow-hidden class on the container div.

    Then you can apply rounded-lg to the <table> element for the overall shape.

    <div className="mt-5 mb-10 w-[540px] overflow-hidden">
  <table className="w-full border-collapse border-gray-400 text-center rounded-lg">
    {/* Other elemnts */}
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search