ContentTable Sections

---
// ContentTable, recovered from blurr-components.pages.dev
---

<div class="ctb-wrap"> <h2 class="ctb-heading">Vergelijk onze pakketten</h2> <div class="ctb-scroll"> <table class="ctb-table ctb-table--striped"> <caption class="ctb-caption">Alle prijzen zijn excl. BTW en mediabudget.</caption> <thead class="ctb-thead"> <tr> <th class="ctb-th" scope="col">Pakket</th><th class="ctb-th" scope="col">Kanalen</th><th class="ctb-th" scope="col">Campagnes/mnd</th><th class="ctb-th" scope="col">Prijs/mnd</th> </tr> </thead> <tbody class="ctb-tbody"> <tr class="ctb-tr"> <th class="ctb-th ctb-th--row" scope="row">Starter</th><td class="ctb-td">1 kanaal</td><td class="ctb-td">2</td><td class="ctb-td">€ 1.500</td> </tr><tr class="ctb-tr"> <th class="ctb-th ctb-th--row" scope="row">Growth</th><td class="ctb-td">2 kanalen</td><td class="ctb-td">4</td><td class="ctb-td">€ 2.500</td> </tr><tr class="ctb-tr"> <th class="ctb-th ctb-th--row" scope="row">Scale</th><td class="ctb-td">3 kanalen</td><td class="ctb-td">Onbeperkt</td><td class="ctb-td">€ 4.000</td> </tr> </tbody> </table> </div> </div>

<style>
.ctb-wrap{padding:2rem 0}
.ctb-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem}
.ctb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctb-table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e5e5e5}
.ctb-caption{font-size:.8rem;color:#999;text-align:left;padding:0 0 .75rem;caption-side:bottom}
.ctb-thead{background:var(--color-primary, #0a0a0a)}
.ctb-thead .ctb-th{color:#fff;font-weight:600;font-size:.85rem;text-align:left;padding:1rem 1.25rem;white-space:nowrap}
.ctb-tr{border-bottom:1px solid #f0f0f0}
.ctb-tr:last-child{border-bottom:none}
.ctb-table--striped .ctb-tr:nth-child(2n){background:#f9f9f9}
.ctb-th--row{font-weight:700;color:var(--color-primary, #0a0a0a);text-align:left;padding:.9rem 1.25rem}
.ctb-td{padding:.9rem 1.25rem;color: #e8e8e8}
</style>