Saya perlu membuat jadual seperti yang ditunjukkan dalam tangkapan skrin:

Apakah keputusan yang saya dapat:

Masalah: Saya tidak boleh membuat sempadan hijau seperti dalam tangkapan skrin lajur "Berdaftar".

S: Jika ia adalah meja, bagaimana untuk membuat sempadan ini?

Saya cuba menulis semula pada div tetapi tiada yang berjaya

Gaya saya

.container {
  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      tr {
        th {
          padding-bottom: 18px;
          width: 230px;
          &:first-child{
            text-align: left;
          }
        }
      }

      border-bottom: 1px solid rgba(101, 97, 123, 0.3);
    }

    tbody {
      tr {

        .doubled-content {
          text-align: center;

          span {
            font-style: italic;
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 0.15px;
            color: #65617B;
          }

          .content-title {
            font-style: normal;
            font-weight: 700;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.15px;
            color: #65617B;
          }
        }

        .plan-content{
          text-align: center;
          font-style: normal;
          font-weight: 700;
          font-size: 18px;
          line-height: 24px;
          letter-spacing: 0.15px;
          color: #65617B;
        }

        .guarantee{
          display: flex;
          align-items: center;
          gap: 24px;

          .text-wrapper{
            display: flex;
            flex-direction: column;

            div{
              font-style: normal;
              font-weight: 400;
              font-size: 18px;
              line-height: 20px;
              display: flex;
              align-items: center;

              color: #65617B;
            }

            span{
              font-family: 'Helvetica';
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 16px;
              letter-spacing: 0.15px;
              width: 350px;

              color: #65617B;
            }
          }

          &__btn{
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        td{
          padding-bottom: 18px;
          vertical-align: middle;

          &:first-child{
            padding-top: 18px;
            width: 500px;
          }
        }
      }

      .expanded-row-item{
        td{
          padding: 10px;
          vertical-align: middle;
          text-align: center;

          &:first-child{
            text-align: left;
          }
        }
        .row-title{
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          letter-spacing: 0.15px;
          color: #65617B;
        }
      }
    }

    // other

    .plan-title {
      font-family: 'Helvetica', serif;
      font-style: normal;
      font-weight: 700;
      font-size: 22px;
      line-height: 24px;
      letter-spacing: 0.15px;

      color: #000000;
    }
    .plan-title-content {
      font-family: 'Helvetica', serif;
      font-style: normal;
      font-weight: 700;
      font-size: 22px;
      line-height: 24px;
      letter-spacing: 0.15px;
      text-align: center;

      color: #000000;
    }
  }
}

Kod saya

import React from "react";
import Image from "next/image";
import CustomButton from "../kit/buttons/CustomButton";
import styles from "../../styles/components/plan.module.scss";
import { Icons } from "../../lib/constants/icons";

const Plan = () => {

  const [firstRowExpanded, setFirstRowExpanded] = React.useState(false);
  const [secondRowExpanded, setSecondRowExpanded] = React.useState(false);
  const [thirdRowExpanded, setThirdRowExpanded] = React.useState(false);


  return (
    <div className={styles["container"]}>
      <table>
        <thead>
        <tr>
          <th className={styles["plan-title"]}>Detailed plan overview</th>
          <th className={styles["plan-title-content"]}>Unregistered</th>
          <th className={styles["plan-title-content"]}>Registered</th>
          <th className={styles["plan-title-content"]}>Professional</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td className={styles["plan-title"]} onClick={() => setFirstRowExpanded(!firstRowExpanded)}>
            Investment tools &nbsp;
            {Icons.chevron_right}
          </td>
          <td className={styles["doubled-content"]}>
            <span>Full free version</span>
            <div className={styles["content-title"]}>Limited</div>
          </td>
          <td className={styles["doubled-content"]}>
            <span>No credit card need</span>
            <div className={styles["content-title"]}>Advanced</div>
          </td>
          <td className={styles["doubled-content"]}>
            <span>29$ / month</span>
            <div className={styles["content-title"]}>Full version</div>
          </td>
        </tr>

        <tr>
          <td className={styles["plan-title"]} onClick={() => setSecondRowExpanded(!secondRowExpanded)}>Community &nbsp;
            {Icons.chevron_right}
          </td>
          <td className={styles["plan-content"]}>
            Limited
          </td>
          <td className={styles["plan-content"]}>
            Advanced
          </td>
          <td className={styles["plan-content"]}>
            Full version
          </td>
        </tr>

        <tr>
          <td className={styles["plan-title"]} onClick={() => setThirdRowExpanded(!thirdRowExpanded)}>Other support &nbsp;
            {Icons.chevron_right}
          </td>
          <td className={styles["plan-content"]}>
            Limited
          </td>
          <td className={styles["plan-content"]}>
            Advanced
          </td>
          <td className={styles["plan-content"]}>
            Full version
          </td>
        </tr>

        <tr>
          <td className={styles["guarantee"]}>
            <Image src={"/images/shared/garantee.svg"} width={61} height={61} />
            <div className={styles["text-wrapper"]}>
              <div>30-Day 100% money back guarantee</div>
              <span>
                You are not charged until the trial ends.
                Subscription fee may be tax deductible.
              </span>
            </div>
          </td>
          <td>
            <div className={styles['guarantee__btn']}>
              <CustomButton text={"Your version"} width={195} height={50} />
            </div>
          </td>
          <td>
            <div className={styles['guarantee__btn']}>
              <CustomButton text={"Free sign up"} width={195} height={50} />
            </div>
          </td>
          <td>
            <div className={styles['guarantee__btn']}>
              <CustomButton text={"GET PRO"} width={195} height={50} />
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  );
};

export default Plan;