我需要制作一个如屏幕截图所示的表格：
我得到了什么结果：
问题：我无法像“已注册”列的屏幕截图中那样制作绿色边框。
问：如果是表格，如何制作这个边框？
我尝试在 div 上重写它，但没有任何效果
我的风格
2
786.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
{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;
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
虽然我可以看到 @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>这里使用表格可能是错误的方法，它使事情变得有点复杂。您确实有表格数据，但您还需要显示并非真正表格的内容（例如此边框）。可以用桌子来完成，但是像那些圆角之类的东西会很难。
我有两个建议。一种是保持你的代码不变，但有一个大的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>