如何为表格的Registered列添加绿色边框？Div方案无效
2026-7-22
如何为表格中的列添加绿色边框？
我需要制作如截图所示的表格：
当前实现效果：
核心问题：无法为表格中的"Registered"列添加截图所示的绿色边框，尝试改用Div布局重构也没有效果。
我的SCSS样式代码：
.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; } } }
我的React代码：
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 {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 {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 {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;
解决方案
要给Registered列添加绿色边框，直接通过CSS精准定位该列的所有单元格即可，以下两种方法任选：
方法1：用nth-child选择器直接定位（无需修改React代码）
Registered是表格的第3列（索引从1开始），在你的SCSS中添加以下样式：
.container { table { // 保留原有所有样式... // 给Registered列的表头和所有单元格加左右绿色边框 thead tr th:nth-child(3), tbody tr td:nth-child(3) { border-left: 2px solid #70c870; // 替换成你需要的绿色色值 border-right: 2px solid #70c870; } // 如果需要让边框包裹整个列（包含顶部和底部），补充以下代码： thead tr th:nth-child(3) { border-top: 2px solid #70c870; } tbody tr:last-child td:nth-child(3) { border-bottom: 2px solid #70c870; } } }
方法2：添加自定义类名（更稳健，适配列顺序变化）
- 修改React代码，给Registered列的表头和所有对应单元格添加
registered-column类：
// 表头部分 <th className={`${styles["plan-title-content"]} ${styles["registered-column"]}`}>Registered</th> // tbody中每一行的Registered列td <td className={`${styles["doubled-content"]} ${styles["registered-column"]}`}>...</td> <td className={`${styles["plan-content"]} ${styles["registered-column"]}`}>...</td> <td className={`${styles["plan-content"]} ${styles["registered-column"]}`}>...</td> <td className={styles["registered-column"]}>...</td>
- 在SCSS中给该类编写边框样式：
.container { table { // 保留原有所有样式... .registered-column { border-left: 2px solid #70c870; border-right: 2px solid #70c870; // 需要上下边框的话自行添加border-top/border-bottom } } }
注意事项
因为你的表格设置了border-collapse: collapse，边框会自动合并，无需担心重复边框问题，确保样式色值和粗细与目标截图一致即可。
内容的提问来源于stack exchange，提问作者Purple Pig
相关产品推荐
相关产品推荐
