表格

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
INV004	Paid	Paypal	$450.00
INV005	Paid	Credit Card	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

用途

导入 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或批量程序导入？请参见安装页。

将 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

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

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