Home
Hugo Del-Negro
light mode table

light mode table

"pretty" table

This tailwind example is contributed by Hugo Del-Negro, on 22-Sep-2025. Component is made with Tailwind CSS v3. It is responsive.

Table

Author Hugo Del-Negro

366

Fork Fullscreen

<div class="max-w-[1100px] mx-auto overflow-x-auto">
  <div class="p-4">
  <table id="spec-table" aria-describedby="caption"
         class="min-w-max border-separate border-spacing-0 bg-white w-[600px]">
    <caption id="caption" class="sr-only">
      Vergleich der Dachboxen – Spezifikationen und Bewertungen
    </caption>
    <thead id="thead"></thead>
    <tbody id="tbody"></tbody>
  </table>
  </div>
</div>

/* ---------- 2) RENDERER ---------- */
const cls = {
  headCell:
    "min-w-[140px] whitespace-nowrap bg-grey-light font-semibold px-4 py-2 " +
    "border-b border-grey border-x border-grey-medium first:border-l-0 last:border-r-0",
  valueCell:
    "min-w-[140px] whitespace-nowrap px-3 py-2 " +
    "border-x border-grey-medium first:border-l-0 last:border-r-0",
  sectionCell:
    "px-3 py-2 bg-grey-light text-grey-darkest text-center sticky left-0 z-10 font-semibold"
};

function renderSpecTable({ products, sections }) {
  const thead = document.getElementById("thead");
  const tbody = document.getElementById("tbody");

// Header row with product names
  const headTr = document.createElement("tr");
  products.forEach(name => {
    const th = document.createElement("th");
    th.scope = "col";
    th.className = cls.headCell;
    th.innerHTML = `<p class="inline-block whitespace-nowrap"><span>${name}</span></p>`;
    headTr.appendChild(th);
  });
  thead.replaceChildren(headTr);

// Body: for each section, add a title row (single row, colspan = product count) and its data rows
  const frag = document.createDocumentFragment();

sections.forEach(section => {
    // section header
    const titleTr = document.createElement("tr");
    const td = document.createElement("td");
    td.colSpan = products.length;
    td.innerHTML = `<div class="${cls.sectionCell}" >${section.title}</div>`;
    titleTr.appendChild(td);
    frag.appendChild(titleTr);

// rows
    section.rows.forEach(row => {
      const tr = document.createElement("tr");
      // Ensure the row has exactly N values
      const vals = Array.isArray(row.values) ? row.values : [];
      if (vals.length !== products.length) {
        console.warn(`Row in section "${section.title}" has ${vals.length} values; expected ${products.length}. Missing cells will be filled with "—".`);
      }
      for (let i = 0; i < products.length; i++) {
        const cell = document.createElement("td");
        cell.className = cls.valueCell;
        const v = vals[i] ?? "—";
        cell.innerHTML = typeof v === "object" && v?.html ? v.html : String(v);
        tr.appendChild(cell);
      }
      frag.appendChild(tr);
    });
  });

tbody.replaceChildren(frag);
}

/* ---------- 3) INIT ---------- */
renderSpecTable(specData);

/* ---------- 4) OPTIONAL: make headers/first column sticky (just section header is sticky now) ----------
   If you also want the first column sticky while horizontally scrolling, wrap table in a
   position:relative container and add a class to those cells; here we didn’t add a dedicated
   first column, so nothing to do.
*/
</script>

Related Examples

Employee table
Modern Unique and responsive table layout

Author:
Anonymous

3 months ago

363
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

10 months ago

2.1k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

9 months ago

2.4k
samtaler status

Author:
rene kristoffersen

1 year ago

1.1k
Table

Author:
Anonymous

2 years ago

6.8k
Simple table with border

Author:
Kairi Greene

2 years ago

12.5k
Advanced table

Author:
Noob

2 years ago

22.5k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

9 months ago

1.6k
Modern Responsive Product Table Design with TailwindCSS
This is a clean and responsive product listing table built with HTML and TailwindCSS. The table displays product images, names, unit prices, quantities, and total costs in a structured format. It adapts to different screen sizes by enabling horizontal scrolling on smaller devices. The design is minimal yet functional, making it ideal for e-commerce websites, order summaries, and invoice pages. Let me know if you need any refinements!

Author:
SHARIFUL ISLAM

10 months ago

1.6k
Table with progress column

Author:
Sophia Baker

3 years ago

12.5k
Tailwind CSS Responsive Table

Author:
Prashant

3 years ago

11.6k
Pricing Table

Author:
Akshay

3 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components