表格

表格以行列关系呈现可比较的结构化数据，并为标题、排序和紧凑浏览保留清晰语义。

最近账单列表
账单	状态	付款方式	金额
INV001	已支付	信用卡	$250.00
INV002	待处理	PayPal	$150.00
INV003	未支付	银行转账	$350.00
INV004	已支付	Paypal	$450.00
INV005	已支付	信用卡	$550.00
INV006	待处理	银行转账	$200.00
INV007	未支付	信用卡	$300.00
合计			$2,500.00

安装Terminal

npm install @a3s-lab/ui@0.4.1

<div class="table-container">
<table class="table">
  <!-- Content of your table -->
</table>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、表格组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/table.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

添加表格 HTML

将 class="table" 添加到您的表元素中。当需要水平滚动时，将其包裹在class="table-container"中。

<div class="table-container">
<table class="table">
  <!-- Content of your table -->
</table>
</div>

示例

下面的示例遵循上游表模式，它们清晰地映射到 A3S UI 的非门户 HTML 模型。

带页脚

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$2,500.00

<div class="table-container">
<table class="table">
  <caption>A list of your recent invoices.</caption>
  <thead>
    <tr>
      <th class="w-[100px]">Invoice</th>
      <th>Status</th>
      <th>Method</th>
      <th class="text-end">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-medium">INV001</td>
      <td>Paid</td>
      <td>Credit Card</td>
      <td class="text-end">$250.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV002</td>
      <td>Pending</td>
      <td>PayPal</td>
      <td class="text-end">$150.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV003</td>
      <td>Unpaid</td>
      <td>Bank Transfer</td>
      <td class="text-end">$350.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td class="text-end">$2,500.00</td>
    </tr>
  </tfoot>
</table>
</div>

带操作

Product	Price	Actions
Wireless Mouse	$29.99
Mechanical Keyboard	$129.99
USB-C Hub	$49.99

<div class="table-container">
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th class="text-end">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-medium">Wireless Mouse</td>
      <td>$29.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">Mechanical Keyboard</td>
      <td>$129.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">USB-C Hub</td>
      <td>$49.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>

RTL

需要时在表容器上设置 dir="rtl"。使用逻辑对齐工具类，例如 text-end。

قائمة الفواتير الأخيرة.
الفاتورة	الحالة	المبلغ
INV001	مدفوعة	$250.00

<div class="table-container" dir="rtl">
  <table class="table">
    <caption>قائمة الفواتير الأخيرة.</caption>
    <thead>
      <tr>
        <th>الفاتورة</th>
        <th>الحالة</th>
        <th class="text-end">المبلغ</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-medium">INV001</td>
        <td>مدفوعة</td>
        <td class="text-end">$250.00</td>
      </tr>
    </tbody>
  </table>
</div>

#表格

#用法

引入 CSS

添加表格 HTML

#示例

#带页脚

#带操作

#RTL

表格

用法

示例

带页脚

带操作

RTL