Nested Row

Child row displayed under a parent.

html

<div class="nrow" style="--accent:#241430;">
  <div class="nrow__scroll">
    <table class="nrow__table">
      <caption>Orders with line items</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 class="nrow__child">
          <td colspan="4">
            <details class="nrow__details" open>
              <summary>Line items for #1042</summary>
              <div class="nrow__body" style="padding-left:20px;">2x Wireless mouse, 1x USB-C cable</div>
            </details>
          </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>
      </tbody>
    </table>
  </div>
</div>
<style>
.nrow { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.nrow__scroll { overflow-x: auto; }
.nrow__table { border-collapse: collapse; width: 100%; }
.nrow__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.nrow__table th, .nrow__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.nrow__table th { background: var(--accent); color: #FAF7F2; }
.nrow__child td { background: #24143008; white-space: normal; }
.nrow__details summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.nrow__details summary::-webkit-details-marker { display: none; }
.nrow__details summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; }
.nrow__details[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .nrow__details summary::before { transition: transform .15s; }
}
.nrow__details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nrow__body { padding-top: 6px; color: #241430cc; font-size: 13px; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" style="--accent:#241430;">
  <div class="overflow-x-auto">
    <table class="border-collapse w-full">
      <caption class="text-left font-semibold px-3.5 py-2.5">Orders with line items</caption>
      <thead><tr class="text-[#FAF7F2]" style="background:#241430">
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Order</th>
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Customer</th>
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Status</th>
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Total</th>
      </tr></thead>
      <tbody>
        <tr><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1042</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£64.00</td></tr>
        <tr>
          <td colspan="4" class="bg-[#24143008] px-3.5 py-2">
            <details class="nrow__details" open>
              <summary class="cursor-pointer font-semibold list-none" style="color:#241430">Line items for #1042</summary>
              <div class="pt-1.5 text-[13px] text-[#241430cc]" style="padding-left:20px;">2x Wireless mouse, 1x USB-C cable</div>
            </details>
          </td>
        </tr>
        <tr><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1041</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">R. Okafor</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1040</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.nrow__details summary::-webkit-details-marker { display: none; }
.nrow__details summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; }
.nrow__details[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .nrow__details summary::before { transition: transform .15s; }
}
</style>

react

function NestedRow({
  caption = "Orders with line items",
  accent = "#241430",
  expanded = true,
  detailText = "2x Wireless mouse, 1x USB-C cable",
  indent = 20,
}) {
  const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  return (
    <div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", 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>
            <tr>{["#1042", "A. Whitfield", "Shipped", "£64.00"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>
            <tr>
              <td colSpan={4} style={{ background: "#24143008", padding: "8px 14px" }}>
                <details open={expanded}>
                  <summary style={{ cursor: "pointer", fontWeight: 600, color: accent, listStyle: "none" }}>Line items for #1042</summary>
                  <div style={{ paddingTop: 6, paddingLeft: indent, color: "#241430cc", fontSize: 13 }}>{detailText}</div>
                </details>
              </td>
            </tr>
            <tr>{["#1041", "R. Okafor", "Processing", "£128.50"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>
            <tr>{["#1040", "M. Iqbal", "Shipped", "£22.00"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}