Row Header

Header identifying a row.

html

<div class="rhdr rhdr--bold" style="--accent:#241430;">
  <div class="rhdr__scroll">
    <table class="rhdr__table">
      <caption>Team directory</caption>
      <thead><tr><th scope="col" class="rhdr__corner" style="width:110px;">Name</th><th scope="col">Role</th><th scope="col">Status</th><th scope="col">Joined</th></tr></thead>
      <tbody>
        <tr><th scope="row" style="width:110px;">A. Whitfield</th><td>Engineer</td><td>Active</td><td>2021</td></tr>
        <tr><th scope="row" style="width:110px;">R. Okafor</th><td>Designer</td><td>Active</td><td>2019</td></tr>
        <tr><th scope="row" style="width:110px;">M. Iqbal</th><td>Manager</td><td>Away</td><td>2017</td></tr>
        <tr><th scope="row" style="width:110px;">S. Novak</th><td>Engineer</td><td>Active</td><td>2022</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.rhdr { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.rhdr__scroll { overflow-x: auto; }
.rhdr__table { border-collapse: collapse; width: 100%; }
.rhdr__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.rhdr__table th, .rhdr__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.rhdr__table thead th { background: var(--accent); color: #FAF7F2; }
.rhdr__table tbody th { background: #24143012; font-weight: 400; text-align: left; }
.rhdr--bold .rhdr__table tbody th { font-weight: 700; }
.rhdr--sticky .rhdr__corner, .rhdr--sticky tbody th { position: sticky; left: 0; z-index: 1; }
.rhdr--sticky .rhdr__corner { z-index: 2; }
</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">Team directory</caption>
      <thead><tr class="text-[#FAF7F2]" style="background:#241430">
        <th scope="col" class="rhdr__corner p-3.5 text-left whitespace-nowrap" style="width:110px;">Name</th>
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Role</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">Joined</th>
      </tr></thead>
      <tbody>
        <tr><th scope="row" class="bg-[#24143012] text-left p-3.5 border-b border-[#24143020] whitespace-nowrap font-bold" style="width:110px;">A. Whitfield</th><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Engineer</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Active</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">2021</td></tr>
        <tr><th scope="row" class="bg-[#24143012] text-left p-3.5 border-b border-[#24143020] whitespace-nowrap font-bold" style="width:110px;">R. Okafor</th><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Designer</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Active</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">2019</td></tr>
        <tr><th scope="row" class="bg-[#24143012] text-left p-3.5 border-b border-[#24143020] whitespace-nowrap font-bold" style="width:110px;">M. Iqbal</th><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Manager</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Away</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">2017</td></tr>
        <tr><th scope="row" class="bg-[#24143012] text-left p-3.5 border-b border-[#24143020] whitespace-nowrap font-bold" style="width:110px;">S. Novak</th><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Engineer</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Active</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">2022</td></tr>
      </tbody>
    </table>
  </div>
</div>

react

function RowHeader({
  caption = "Team directory",
  accent = "#241430",
  stickyFirstCol = false,
  headerWidth = 110,
  boldNames = true,
}) {
  const rows = [
    ["A. Whitfield", "Engineer", "Active", "2021"],
    ["R. Okafor", "Designer", "Active", "2019"],
    ["M. Iqbal", "Manager", "Away", "2017"],
    ["S. Novak", "Engineer", "Active", "2022"],
  ];
  const th = { padding: "10px 14px", textAlign: "left", borderBottom: "1px solid #24143020", whiteSpace: "nowrap", background: "#24143012", fontWeight: boldNames ? 700 : 400, width: headerWidth, position: stickyFirstCol ? "sticky" : "static", left: 0 };
  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" }}>
              <th scope="col" style={{ ...cell, width: headerWidth, position: stickyFirstCol ? "sticky" : "static", left: 0, zIndex: 2 }}>Name</th>
              <th scope="col" style={cell}>Role</th>
              <th scope="col" style={cell}>Status</th>
              <th scope="col" style={cell}>Joined</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row[0]}>
                <th scope="row" style={th}>{row[0]}</th>
                <td style={cell}>{row[1]}</td><td style={cell}>{row[2]}</td><td style={cell}>{row[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}