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 |
<div class="table-container">
<table class="table">
<caption>A list of your recent invoices.</caption>
<thead>
<tr>
<th>Invoice</th>
<th>Status</th>
<th>Method</th>
<th>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>
<tr>
<td class="font-medium">INV004</td>
<td>Paid</td>
<td>Paypal</td>
<td class="text-end">$450.00</td>
</tr>
<tr>
<td class="font-medium">INV005</td>
<td>Paid</td>
<td>Credit Card</td>
<td class="text-end">$550.00</td>
</tr>
<tr>
<td class="font-medium">INV006</td>
<td>Pending</td>
<td>Bank Transfer</td>
<td class="text-end">$200.00</td>
</tr>
<tr>
<td class="font-medium">INV007</td>
<td>Unpaid</td>
<td>Credit Card</td>
<td class="text-end">$300.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td class="text-end">$2,500.00</td>
</tr>
</tfoot>
</table>
</div>
Add the table class to your table element. Wrap it in table-container when horizontal scrolling is needed.
<div class="table-container">
<table class="table">
<!-- Content of your table -->
</table>
</div>
| Invoice |
Amount |
| INV001 |
$250.00 |
| Total |
$250.00 |
<table class="table">
<thead>
<tr>
<th>Invoice</th>
<th class="text-end">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>INV001</td>
<td class="text-end">$250.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td class="text-end">$250.00</td>
</tr>
</tfoot>
</table>
| Name |
Actions |
| Project Alpha |
|
<table class="table">
<thead>
<tr>
<th>Name</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium">Project Alpha</td>
<td class="text-end">
<button type="button" class="btn-xs-outline">Open</button>
</td>
</tr>
</tbody>
</table>
Tables support right-to-left layouts through native table direction and logical alignment utilities such as 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>