Totals Footer Row
A copy-paste tables & data grids component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Tables & Data GridsHTMLCSSany framework
| Item | Qty | Price | Total |
|---|---|---|---|
| Nexus S | 2 | $24.99 | $49.98 |
| Orbit Pro | 1 | $49.99 | $49.99 |
| Velo X | 3 | $19.99 | $59.97 |
| Total | $159.94 | ||
Copy into your project
HTML
<div class="nuda-tbl-totals">
<table class="nuda-tbl-totals__table">
<thead>
<tr>
<th class="nuda-tbl-totals__th">Item</th>
<th class="nuda-tbl-totals__th nuda-tbl-totals__th--right">Qty</th>
<th class="nuda-tbl-totals__th nuda-tbl-totals__th--right">Price</th>
<th class="nuda-tbl-totals__th nuda-tbl-totals__th--right">Total</th>
</tr>
</thead>
<tbody>
<tr class="nuda-tbl-totals__row">
<td class="nuda-tbl-totals__td">Nexus S</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">2</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$24.99</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$49.98</td>
</tr>
<tr class="nuda-tbl-totals__row">
<td class="nuda-tbl-totals__td">Orbit Pro</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">1</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$49.99</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$49.99</td>
</tr>
<tr class="nuda-tbl-totals__row">
<td class="nuda-tbl-totals__td">Velo X</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">3</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$19.99</td>
<td class="nuda-tbl-totals__td nuda-tbl-totals__td--right">$59.97</td>
</tr>
</tbody>
<tfoot>
<tr class="nuda-tbl-totals__foot">
<td class="nuda-tbl-totals__foot-td" colspan="3">Total</td>
<td class="nuda-tbl-totals__foot-td nuda-tbl-totals__foot-td--amount">$159.94</td>
</tr>
</tfoot>
</table>
</div>CSS
.nuda-tbl-totals {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
overflow: hidden;
background: #141414;
}
.nuda-tbl-totals__table {
width: 100%;
border-collapse: collapse;
font-size: .78rem;
}
.nuda-tbl-totals__th {
padding: .5rem .75rem;
text-align: left;
color: #777;
font-weight: 600;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
background: #1a1a1a;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.nuda-tbl-totals__th--right {
text-align: right;
}
.nuda-tbl-totals__td {
padding: .45rem .75rem;
color: #cfcfcf;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.nuda-tbl-totals__td--right {
text-align: right;
font-variant-numeric: tabular-nums;
}
.nuda-tbl-totals__row:last-child .nuda-tbl-totals__td {
border-bottom: none;
}
.nuda-tbl-totals__foot {
background: #1a1a1a;
border-top: 1px solid rgba(255,255,255,.15);
}
.nuda-tbl-totals__foot-td {
padding: .5rem .75rem;
color: #fafafa;
font-weight: 600;
font-size: .78rem;
}
.nuda-tbl-totals__foot-td--amount {
text-align: right;
color: #e4ff54;
font-size: .88rem;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
How to use Totals Footer Row
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.