如何為表格中的欄位製作邊框？

Question

我需要製作一個如螢幕截圖所示的表格：

我得到了什麼結果：

問題：我無法像「已註冊」列的螢幕截圖中那樣製作綠色邊框。

問：如果是表格，如何製作這個邊框？

我嘗試在 div 上重寫它，但沒有任何效果

我的風格

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

我的程式碼

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

雖然我可以看到 @finitelooper 的觀點，即出於樣式目的，取消表結構更容易，但我對刪除這意味著的語義感到不舒服。

畢竟，資料是表格形式的。

此程式碼段提供了不同的方法 - 在相關 td 和 th 單元格上的偽元素之前放置綠色邊框。

這些曲線是透過在第一個和最後一個 td 上設定相關的頂部/底部邊框來實現的。

當涉及到實際尺寸增加多少（10px）時，程式碼可以做一些細化，但這只是一個示範：

<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

這裡使用表格可能是錯誤的方法，它使事情變得有點複雜。您確實有表格數據，但您還需要顯示並非真正表格的內容（例如此邊框）。可以用桌子來完成，但是像那些圓角之類的東西會很難。

我有兩個建議。一種是保持你的程式碼不變，但有一個大的div，它是透明的，上面有一個邊框，你可以在該表格的頂部移動你可以這樣做，這樣你就可以點擊它，但你很可能會使用position:absolute 將其放置在您想要的位置。

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