如果你也想要在网站上实现我们领航主题首页对比表格的效果，可以用下面的方式来实现：
1、后台添加一个栏目块，选择全宽
2、添加一个间隔块，来和上面的内容保持空隙
3、添加个标题
4、添加一个段落用来写描述
5、创建一个html块，粘贴以下代码，内容自己修改为你需要的
<div class="comparison-table">
<table>
<thead>
<tr class="table-header">
<th>Pain Points</th>
<th>❌ Custom Development</th>
<th>❌ Builders (e.g. Elementor)</th>
<th>✅ LingHang Theme</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pain-point">Price</td>
<td data-label="定制开发">Starts at 10k+, extra charge per edit</td>
<td data-label="Elementor等构建器">Theme 60+plugins89/yr, English skills needed</td>
<td class="advantage" data-label="领航主题">
Only ¥398 once, lifetime use, no extra fees
</td>
</tr>
<tr>
<td class="pain-point">Speed</td>
<td data-label="定制开发">Depends on developer, hard to maintain</td>
<td data-label="Elementor等构建器">Bloated code, 2-3s load, hurts SEO</td>
<td class="advantage" data-label="领航主题">
Native code, 0.8s load, GTmetrix Grade A
</td>
</tr>
<tr>
<td class="pain-point">Ease of Use</td>
<td data-label="定制开发">Relies entirely on developer, no DIY edits</td>
<td data-label="Elementor等构建器">Takes 2-4 weeks to learn complex drag-and-drop</td>
<td class="advantage" data-label="领航主题">
3-min setup, as simple as filling a form
</td>
</tr>
<tr>
<td class="pain-point">Support</td>
<td data-label="定制开发">No support after contract, costly to switch</td>
<td data-label="Elementor等构建器">Unanswered English forums, DIY troubleshooting</td>
<td class="advantage" data-label="领航主题">
1-on-1 WeChat support in Chinese
</td>
</tr>
</tbody>
</table>
</div>
6、底下如果还需要，就再添加一个段落写文字。
7、添加自定义css代码，方法参见：领航主题如何添加自定义CSS代码 – 领航主题
/* 对比表格样式 - 响应式堆叠布局 */
.comparison-table {
margin: var(--spacing-lg) auto;
max-width: var(--container-max-width);
padding: 0 var(--container-padding);
margin-bottom: var(--spacing-lg);
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
box-shadow: var(--shadow-md);
border-radius: 0;
overflow: hidden;
border: none;
table-layout: fixed;
}
/* 表头样式 */
.table-header {
background-color: var(--secondary-color);
color: white;
}
.table-header th {
padding: 1rem;
text-align: left;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 列宽设置 */
.table-header th:nth-child(1),
.pain-point {
width: 15%;
min-width: 100px;
}
.table-header th:nth-child(2),
.table-header th:nth-child(3),
.table-header th:nth-child(4) {
width: 28.33%;
}
/* 表格内容样式 */
.comparison-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 15px;
line-height: 1.5;
color: var(--text-color);
word-wrap: break-word;
overflow-wrap: break-word;
}
.comparison-table tr:last-child td {
border-bottom: none;
}
/* 痛点列样式 */
.pain-point {
background-color: var(--background-light);
font-weight: 600;
border-right: 1px solid var(--border-color);
color: var(--secondary-color);
}
/* 优势列样式 */
.advantage {
background-color: rgba(0, 154, 0, 0.05);
color: var(--accent-color);
font-weight: 500;
position: relative;
padding-left: 2.5rem;
}
/* 对勾图标样式 */
.advantage::before {
content: "✓";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--accent-color);
font-weight: 600;
font-size: 16px;
}
/* 行悬停效果 */
.comparison-table tbody tr {
transition: var(--transition-base);
}
.comparison-table tbody tr:hover {
background-color: rgba(253, 95, 23, 0.03);
}
/* 移动端堆叠布局 */
@media (max-width: 768px) {
td.pain-point {
color: #fff;
}
.comparison-table {
margin: var(--spacing-md) auto;
padding: 0 15px;
}
.comparison-table table {
display: block;
min-width: auto;
box-shadow: none;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
}
.comparison-table thead {
display: none;
}
.comparison-table tbody,
.comparison-table tr,
.comparison-table td {
display: block;
width: 100% !important;
border: none;
}
.comparison-table tr {
margin-bottom: 0;
border-bottom: 1px solid var(--border-color);
background: var(--background);
}
.comparison-table tr:last-child {
border-bottom: none;
}
.pain-point {
background: var(--secondary-color);
color: white;
font-weight: 600;
padding: 1rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
border-right: none;
width: 100%;
}
.comparison-table td:not(.pain-point) {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color-light);
display: flex;
align-items: flex-start;
}
.comparison-table td:not(.pain-point)::before {
content: attr(data-label);
font-weight: 600;
min-width: 100px;
margin-right: 1rem;
color: var(--text-muted);
font-size: 0.9em;
flex-shrink: 0;
}
.advantage {
background-color: rgba(0, 154, 0, 0.08);
color: var(--accent-color);
padding-left: 1rem;
}
.advantage::before {
content: "✓";
position: static;
transform: none;
margin-right: 0.5rem;
font-size: 14px;
}
}
/* 超小屏幕优化 */
@media (max-width: 480px) {
.comparison-table {
padding: 0 10px;
}
.comparison-table td:not(.pain-point)::before {
min-width: 80px;
font-size: 0.8em;
}
.comparison-table td:not(.pain-point) {
padding: 0.6rem 0.8rem;
font-size: 14px;
flex-direction: column;
align-items: flex-start;
}
.comparison-table td:not(.pain-point)::before {
margin-right: 0;
margin-bottom: 0.5rem;
min-width: auto;
}
.pain-point {
padding: 0.8rem;
font-size: 14px;
}
}
