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

473

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

Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

1 year ago

1.7k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

4.1k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.3k
Tailwind CSS Responsive Table

Author:
Prashant

3 years ago

11.8k
samtaler status

Author:
rene kristoffersen

1 year ago

1.1k
Simple responsive table

Author:
Lukas Müller

2 years ago

11.7k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

10 months ago

1.4k
Table with progress column

Author:
Sophia Baker

3 years ago

12.7k
Table
tables

Author:
Aman kumar

1 year ago

4.7k
Advanced table

Author:
Noob

3 years ago

22.7k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

5 months ago

510
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

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components