Density Selector

Changes table spacing/density.

Customer orders
OrderCustomerStatusTotal
#1042A. WhitfieldShipped£64.00
#1041R. OkaforProcessing£128.50
#1040M. IqbalShipped£22.00
#1039S. NovakRefunded£40.00
#1038L. DuarteShipped£96.20

html

<div class="dsel dsel--stripe" data-density="cosy" style="--accent:#241430; --fs:14px;">
  <div class="dsel__scroll">
    <table class="dsel__table">
      <caption>Customer orders</caption>
      <thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col">Total</th></tr></thead>
      <tbody>
        <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
        <tr><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>
        <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>
        <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
        <tr><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.dsel { font-family: system-ui, sans-serif; font-size: var(--fs); color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.dsel__scroll { overflow-x: auto; }
.dsel__table { border-collapse: collapse; width: 100%; }
.dsel__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.dsel__table th, .dsel__table td { text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.dsel__table th { background: var(--accent); color: #FAF7F2; }
.dsel--stripe tbody tr:nth-child(even) { background: #24143010; }
.dsel[data-density="compact"] th, .dsel[data-density="compact"] td { padding: 4px 10px; }
.dsel[data-density="cosy"] th, .dsel[data-density="cosy"] td { padding: 9px 14px; }
.dsel[data-density="comfortable"] th, .dsel[data-density="comfortable"] td { padding: 16px 18px; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-[#241430] bg-[#FAF7F2] overflow-hidden [&_tbody_tr:nth-child(even)]:bg-[#24143010]" data-density="cosy" style="--accent:#241430; font-size:14px;">
  <div class="overflow-x-auto">
    <table class="border-collapse w-full">
      <caption class="text-left font-semibold px-3.5 py-2.5">Customer orders</caption>
      <thead><tr class="text-[#FAF7F2]" style="background:#241430">
        <th scope="col" class="dsel__cell text-left whitespace-nowrap">Order</th>
        <th scope="col" class="dsel__cell text-left whitespace-nowrap">Customer</th>
        <th scope="col" class="dsel__cell text-left whitespace-nowrap">Status</th>
        <th scope="col" class="dsel__cell text-left whitespace-nowrap">Total</th>
      </tr></thead>
      <tbody>
        <tr><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">#1042</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">A. Whitfield</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">£64.00</td></tr>
        <tr><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">#1041</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">R. Okafor</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">£128.50</td></tr>
        <tr><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">#1040</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">M. Iqbal</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">£22.00</td></tr>
        <tr><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">#1039</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">S. Novak</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">Refunded</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">£40.00</td></tr>
        <tr><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">#1038</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">L. Duarte</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="dsel__cell border-b border-[#24143020] whitespace-nowrap">£96.20</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
[data-density="compact"] .dsel__cell { padding: 4px 10px; }
[data-density="cosy"] .dsel__cell { padding: 9px 14px; }
[data-density="comfortable"] .dsel__cell { padding: 16px 18px; }
</style>

react

function DensitySelector({
  caption = "Customer orders",
  accent = "#241430",
  density = "cosy",
  stripe = true,
  fontScale = 14,
}) {
  const rows = [
    ["#1042", "A. Whitfield", "Shipped", "£64.00"],
    ["#1041", "R. Okafor", "Processing", "£128.50"],
    ["#1040", "M. Iqbal", "Shipped", "£22.00"],
    ["#1039", "S. Novak", "Refunded", "£40.00"],
    ["#1038", "L. Duarte", "Shipped", "£96.20"],
  ];
  const padByDensity = { compact: "4px 10px", cosy: "9px 14px", comfortable: "16px 18px" };
  const pad = padByDensity[density] || padByDensity.cosy;
  const cell = { padding: pad, textAlign: "left", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  return (
    <div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", fontFamily: "system-ui, sans-serif", fontSize: fontScale, color: "#241430", background: "#FAF7F2" }}>
      <div style={{ overflowX: "auto" }}>
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
          <thead>
            <tr style={{ background: accent, color: "#FAF7F2" }}>
              {["Order", "Customer", "Status", "Total"].map((h) => <th key={h} scope="col" style={cell}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={row[0]} style={{ background: stripe && i % 2 === 1 ? "#24143010" : "transparent" }}>
                {row.map((c, j) => <td key={j} style={cell}>{c}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}