Mainframe Data Grid

ID_CODE	STATUS	LOAD
#8821	ONLINE	0.02ms
#8822	OFFLINE	---

HTML_STRUCTURE

<div class='bh-table-v1-cont'><table class='bh-table-v1-main'><thead><tr><th>ID_CODE</th><th>STATUS</th><th>LOAD</th></tr></thead><tbody><tr><td>#8821</td><td><span class='bh-table-v1-on'>ONLINE</span></td><td>0.02ms</td></tr><tr><td>#8822</td><td><span class='bh-table-v1-off'>OFFLINE</span></td><td>---</td></tr></tbody></table></div>

CSS_STYLING

.bh-table-v1-cont { width: 100%; overflow-x: auto; border: 2px solid #fff; } .bh-table-v1-main { width: 100%; border-collapse: collapse; background: #000; font-family: monospace; } .bh-table-v1-main th { background: #fff; color: #000; padding: 12px; font-size: 11px; text-align: left; } .bh-table-v1-main td { padding: 12px; border-bottom: 1px solid #222; color: #fff; font-size: 12px; } .bh-table-v1-on { color: #00ff88; } .bh-table-v1-off { color: #ff0055; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.