Compact Dense Table
A copy-paste tables & data grids component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Tables & Data GridsHTMLCSSany framework
| Key | Value | Type |
|---|---|---|
| api_key | sk-•••••••• | string |
| timeout | 5000 | number |
| retries | 3 | number |
| debug | false | boolean |
| region | us-east-1 | string |
Copy into your project
HTML
<div class="nuda-tbl-dense">
<table class="nuda-tbl-dense__table">
<thead>
<tr>
<th class="nuda-tbl-dense__th">Key</th>
<th class="nuda-tbl-dense__th">Value</th>
<th class="nuda-tbl-dense__th">Type</th>
</tr>
</thead>
<tbody>
<tr class="nuda-tbl-dense__row">
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--key">api_key</td>
<td class="nuda-tbl-dense__td">sk-••••••••</td>
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--type">string</td>
</tr>
<tr class="nuda-tbl-dense__row">
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--key">timeout</td>
<td class="nuda-tbl-dense__td">5000</td>
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--type">number</td>
</tr>
<tr class="nuda-tbl-dense__row">
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--key">retries</td>
<td class="nuda-tbl-dense__td">3</td>
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--type">number</td>
</tr>
<tr class="nuda-tbl-dense__row">
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--key">debug</td>
<td class="nuda-tbl-dense__td">false</td>
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--type">boolean</td>
</tr>
<tr class="nuda-tbl-dense__row">
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--key">region</td>
<td class="nuda-tbl-dense__td">us-east-1</td>
<td class="nuda-tbl-dense__td nuda-tbl-dense__td--type">string</td>
</tr>
</tbody>
</table>
</div>CSS
.nuda-tbl-dense {
width: 100%;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.1);
overflow: hidden;
background: #141414;
font-family: monospace;
}
.nuda-tbl-dense__table {
width: 100%;
border-collapse: collapse;
font-size: .72rem;
}
.nuda-tbl-dense__th {
padding: .3rem .6rem;
text-align: left;
color: #555;
font-weight: 600;
font-size: .66rem;
text-transform: uppercase;
letter-spacing: .07em;
background: #1a1a1a;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.nuda-tbl-dense__td {
padding: .28rem .6rem;
color: #cfcfcf;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.nuda-tbl-dense__row:last-child .nuda-tbl-dense__td {
border-bottom: none;
}
.nuda-tbl-dense__td--key {
color: #e4ff54;
font-weight: 500;
}
.nuda-tbl-dense__td--type {
color: #777;
font-style: italic;
}
How to use Compact Dense Table
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.