Comment faire des bordures pour les colonnes d’un tableau ?

Question

Je dois créer un tableau comme indiqué dans la capture d'écran :

Quels résultats j'ai obtenus :

Problème : Je n'arrive pas à faire une bordure verte comme dans la capture d'écran de la colonne "Enregistré".

Q : S'il s'agit d'un tableau, comment faire cette bordure ?

J'ai essayé de le réécrire sur un div mais rien n'a fonctionné

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

Mon 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

Bien que je puisse comprendre le point de @finitelooper selon lequel il est plus facile de supprimer la structure de la table à des fins de style, je ne suis pas à l'aise avec la sémantique de la suppression de cela.

Après tout, les données sont sous forme de tableau.

Cet extrait propose une approche différente : placer une bordure verte avant le pseudo-élément sur les cellules td et th pertinentes.

Ces courbes sont obtenues en définissant des bordures haut/bas pertinentes sur le premier et le dernier td.

Le code pourrait nécessiter quelques améliorations en ce qui concerne l'augmentation de la taille réelle (10 px), mais ce n'est qu'une démo :

<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

Utiliser des tableaux ici n'est probablement pas la bonne approche, cela rend les choses un peu compliquées. Vous disposez de données de tableau, mais vous devez également afficher quelque chose qui n'est pas vraiment un tableau (comme cette bordure). Cela peut être fait avec une table, mais des choses comme ces coins arrondis seraient difficiles.

J'ai deux suggestions. La première consiste à garder votre code identique mais à avoir un gros div transparent et doté d'une bordure que vous pouvez déplacer au-dessus de ce tableau. Vous pouvez le faire pour pouvoir cliquer dessus, mais vous êtes joli. Vous pourriez l'utiliser position:absolute pour placez-le où vous voulez.

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