How to make borders for columns in table?

Question

I need to make a table as shown in the screenshot:

What results I got:

Problem: I can't make a green border like in the screenshot of the "Registered" column.

Q: If it is a table, how to make this border?

I tried rewriting it on a div but nothing worked

my style

.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;
    }
  }
}

My code

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

While I can see @finitelooper's point that it's easier to do away with the table structure for styling purposes, I'm not comfortable with the semantics of removing that.

After all, the data is in tabular form.

This snippet provides a different approach - placing a green border before the pseudo-element on the relevant td and th cells.

These curves are achieved by setting relevant top/bottom borders on the first and last td.

The code could use some refinement when it comes to how much the actual size increases (10px), but this is just a demonstration:

<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

Using tables here is probably the wrong approach, it complicates things a bit. You do have table data, but you also need to display something that's not really a table (like this border). It can be done with a table, but things like those rounded corners would be difficult.

I have two suggestions. One is to keep your code the same but have a big div that is transparent and has a border on it that you can move on top of that table you can do it so you can click on it but you're pretty Maybe use position:absolute to position it where you want.

.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>