Bagaimana untuk membuat sempadan untuk lajur dalam jadual?

Question

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;

Answer 1

Walaupun saya dapat melihat maksud @finitelooper bahawa lebih mudah untuk menghapuskan struktur jadual untuk tujuan penggayaan, saya tidak selesa dengan semantik untuk membuangnya.

Lagipun, data adalah dalam bentuk jadual.

Coretan ini menawarkan pendekatan berbeza - meletakkan sempadan hijau sebelum elemen pseudo pada sel td dan ke yang berkaitan.

Keluk ini dicapai dengan menetapkan sempadan atas/bawah yang berkaitan pada td pertama dan terakhir.

Kod ini boleh menggunakan sedikit penyempurnaan apabila melibatkan peningkatan saiz sebenar (10px), tetapi ini hanyalah demo:

<style>
  td span {
    font-size: 8px;
  }
  
  tr td:nth-child(3),
  tr th:nth-child(3) {
    position: relative;
  }
  
  tr td:nth-child(3)::before,
  tr th:nth-child(3)::before {
    rbackground: pink;
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    bottom: -5px;
    display: inline-block;
    width: 100%;
    z-index: -1;
    border: solid 1px lime;
    border-width: 0px 1px 0px 1px;
  }
  
  tr:first-child th:nth-child(3)::before {
    border-width: 1px 1px 0 1px;
    border-radius: 10px 10px 0 0;
  }
  
  tr:last-child td:nth-child(3)::before {
    border-width: 0px 1px 1px 1px;
    border-radius: 0 0 10px 10px;
  }
</style>
<div>

  <div class="column-highlight"></div>

  <table>
    <thead>
      <tr>
        <th>Detailed plan overview</th>
        <th>Unregistered</th>
        <th>Registered</th>
        <th>Professional</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Investment tools</td>
        <td>
          <span>Full free version</span>
          <div>Limited</div>
        </td>
        <td>
          <span>No credit card need</span>
          <div>Advanced</div>
        </td>
        <td>
          <span>29$ / month</span>
          <div>Full version</div>
        </td>
      </tr>

      <tr>
        <td>Community</td>
        <td>Limited</td>
        <td>Advanced</td>
        <td>Full version</td>
      </tr>

      <tr>
        <td>Other support</td>
        <td>Limited</td>
        <td>Advanced</td>
        <td>Full version</td>
      </tr>

      <tr>
        <td style="width: 250px;">
          <div>
            <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>
          <button type="button">Your version</button>
        </td>
        <td>
          <button type="button">Free sign up</button>
        </td>
        <td>
          <button type="button">Get Pro</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Menggunakan jadual di sini mungkin pendekatan yang salah, ia menjadikan perkara agak rumit. Anda mempunyai data jadual, tetapi anda juga perlu memaparkan sesuatu yang sebenarnya bukan jadual (seperti sempadan ini). Ia boleh dilakukan dengan meja, tetapi perkara seperti sudut bulat itu akan menjadi sukar.

Saya ada dua cadangan. Salah satunya adalah untuk memastikan kod anda sama tetapi mempunyai div besar yang telus dan mempunyai sempadan padanya yang boleh anda alihkan di atas jadual itu anda boleh melakukannya supaya anda boleh mengklik padanya tetapi anda cantik Mungkin menggunakan position:absolute untuk letak di mana anda mahu.

.column-highlight {
  border: 2px solid limegreen;
  border-radius: 10px;
  position: absolute;
  top: 7px;
  left: 375px;
  width: 110px;
  height: 174px;
  pointer-events: none;
}

<div>

  <div class="column-highlight"></div>

  <table>
    <thead>
    <tr>
      <th>Detailed plan overview</th>
      <th>Unregistered</th>
      <th>Registered</th>
      <th>Professional</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Investment tools</td>
      <td>
        <span>Full free version</span>
        <div>Limited</div>
      </td>
      <td>
        <span>No credit card need</span>
        <div>Advanced</div>
      </td>
      <td>
        <span>29$ / month</span>
        <div>Full version</div>
      </td>
    </tr>

    <tr>
      <td>Community</td>
      <td>Limited</td>
      <td>Advanced</td>
      <td>Full version</td>
    </tr>

    <tr>
      <td>Other support</td>
      <td>Limited</td>
      <td>Advanced</td>
      <td>Full version</td>
    </tr>

    <tr>
      <td style="width: 250px;">
        <div>
          <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>
        <button type="button">Your version</button>
      </td>
      <td>
        <button type="button">Free sign up</button>
      </td>
      <td>
        <button type="button">Get Pro</button>
      </td>
    </tr>
    </tbody>
  </table>
</div>