<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap5 行背景色表格 - 迹忆客(jiyik.com)</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="m-4"> <table class="table"> <thead> <tr> <th>#</th> <th>Bill</th> <th>Payment Date</th> <th>Payment Status</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>1</td> <td>Credit Card</td> <td>04/07/2021</td> <td>Waiting for statement</td> </tr> <tr class="table-secondary"> <td>2</td> <td>Insurance</td> <td>02/07/2021</td> <td>Cancelled</td> </tr> <tr class="table-success"> <td>3</td> <td>Water</td> <td>01/07/2021</td> <td>Paid</td> </tr> <tr class="table-info"> <td>4</td> <td>Internet</td> <td>05/07/2021</td> <td>Change plan</td> </tr> <tr class="table-warning"> <td>5</td> <td>Electricity</td> <td>03/07/2021</td> <td>Pending</td> </tr> <tr class="table-danger"> <td>6</td> <td>Telephone</td> <td>06/07/2021</td> <td>Due</td> </tr> <tr class="table-light"> <td>7</td> <td>Car Service</td> <td>08/07/2021</td> <td>Call in to confirm</td> </tr> <tr class="table-dark"> <td>8</td> <td>Gas</td> <td>06/07/2021</td> <td>Payment failed</td> </tr> </tbody> </table></div></body></html>