Trang chủ
Table UI v1
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="tb-acc"> <table class="tb"> <thead> <tr> <th></th><th>Company</th><th>Amount</th><th>Value</th><th>Strategy A</th> </tr> </thead> <tbody> <tr class="v"> <td><button class="btn-acc"><svg viewBox="0 0 448 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5..."/></svg></button></td> <td>Company Name</td><td class="pcs">457</td><td class="cur">6535178</td><td class="per">50,71</td> </tr> <tr class="f"><td colspan="5"> <div class="wrap"><div class="ct"> <h3>Company Name</h3> <p>Pellentesque habitant morbi tristique senectus...</p> <table> <thead><tr><th>Company</th><th>Cust no</th><th>Name</th><th>Ins no</th><th>Strategy</th></tr></thead> <tbody> <tr><td>Sony</td><td>13245</td><td>John Doe</td><td>064578</td><td>A,100%</td></tr> <tr><td>Sony</td><td>13288</td><td>Claire</td><td>064877</td><td>B,100%</td></tr> <tr><td>Sony</td><td>12341</td><td>Barry</td><td>064123</td><td>A,100%</td></tr> </tbody> </table> </div></div> </td></tr> </tbody> </table> </div>
CSS
Copy
*{box-sizing:border-box} .tb-acc{color:#333;font-size:14px} .tb-acc .pcs::after{content:" pcs"} .tb-acc .cur::before{content:"$"} .tb-acc .per::after{content:"%"} .tb{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)} .tb th{background:#1dc071;color:#fff;padding:8px;text-align:left} .tb td{padding:16px;vertical-align:middle} .v{cursor:pointer} .v:nth-child(4n-1){background:#eaf9f1} .v:hover{background:#eaf9f1} .v.open .btn-acc svg{transform:rotate(180deg)} .btn-acc{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;transition:.3s} .btn-acc:hover{background:#fff} .btn-acc svg{width:12px;color:#333;transition:.3s} .f td{padding:0} .wrap{height:0;overflow:hidden;transition:.3s} .ct{padding:16px} .ct h3{margin:0 0 8px;font-size:20px;font-weight:700} .ct p{margin:0 0 16px;color:#555}
JS
Copy
const getPar = (el, sel) => { while (el?.parentElement) { if (el.parentElement.matches(sel)) return el.parentElement; el = el.parentElement; } return null; }; const toggleAcc = e => { const tr = getPar(e.currentTarget, '.v'); const fold = tr?.nextElementSibling; const wrap = fold?.querySelector('.wrap'); tr?.classList.toggle('open'); fold?.classList.toggle('open'); wrap?.style.setProperty('height', fold.classList.contains('open') ? `${wrap.scrollHeight}px` : '0'); }; document.querySelectorAll('.btn-acc').forEach(b => b.addEventListener('click', toggleAcc));