精选
对比Comparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 个框架初级
Loading…
A pricing matrix with a price under each plan name, scrolling inside its wrapper.
<!--
A real table with a price under each plan name. The wrapper (not the table)
scrolls and the table keeps a min-width, so at 320px the columns scroll while
the feature column stays put. Boolean cells are ✓/✗ (aria-hidden) + sr-only word.
-->
<div class="w-full overflow-x-auto">
<table class="w-full min-w-[36rem] border-collapse text-left text-sm">
<thead>
<tr>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:text-gray-300">Feature</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center dark:border-gray-800">
<span class="block font-semibold text-gray-900 dark:text-gray-100">Starter</span>
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400">$0</span>
</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center dark:border-gray-800">
<span class="block font-semibold text-gray-900 dark:text-gray-100">Pro</span>
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400">$29</span>
</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center dark:border-gray-800">
<span class="block font-semibold text-gray-900 dark:text-gray-100">Enterprise</span>
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400">Custom</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="border-b border-gray-100 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:text-gray-300">Seats</th>
<td class="border-b border-gray-100 px-3 py-2.5 text-center text-gray-700 dark:border-gray-800 dark:text-gray-300">1</td>
<td class="border-b border-gray-100 px-3 py-2.5 text-center text-gray-700 dark:border-gray-800 dark:text-gray-300">10</td>
<td class="border-b border-gray-100 px-3 py-2.5 text-center text-gray-700 dark:border-gray-800 dark:text-gray-300">Unlimited</td>
</tr>
<tr>
<th scope="row" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">SSO & SAML</th>
<td class="px-3 py-2.5 text-center">
<span class="font-bold text-gray-400 dark:text-gray-600" aria-hidden="true">✗</span><span class="sr-only">Not included</span>
</td>
<td class="px-3 py-2.5 text-center">
<span class="font-bold text-gray-400 dark:text-gray-600" aria-hidden="true">✗</span><span class="sr-only">Not included</span>
</td>
<td class="px-3 py-2.5 text-center">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span><span class="sr-only">Included</span>
</td>
</tr>
</tbody>
</table>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
plans必填 | MatrixPlan[] | - | 参与比较的列，按显示顺序排列。 |
rows必填 | MatrixRow[] | - | 要渲染的项目数组。 |
className | string | - | 合并到根元素上的额外类名。 |
A real `<table>` with scoped headers and a price line under each plan name. The wrapper - not the table - scrolls and the table holds a `min-w`, so at 320px the plan columns scroll while the feature column stays anchored. Boolean cells render an `aria-hidden` ✓/✗ plus a visually-hidden word; strings render verbatim, so "Unlimited" and a checkmark share one row type.