light mode table

"pretty" table

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

Table

Author Hugo Del-Negro

Tailwind v3.4 905 3

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

Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Table
tables

Aman kumar

2 years ago

5.4k
Nutrition Facts table example

Kofi Osei

3 years ago

13.2k
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!

SHARIFUL ISLAM

1 year ago

2.3k
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. 🚀

Banshee

1 year ago

2.1k
Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14k
Table template

Oliver Hansen

3 years ago

17.3k
Respensive Table
Respensive table for all devices.

Arshid Iqbal

3 months ago

377
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Employee table
Modern Unique and responsive table layout

Anonymous

1 year ago

1.4k
Tailwind CSS Datatable
Use this datatable component from Flowbite to power interactivity for table like pagination, search, sorting, and more: https://flowbite.com/docs/plugins/datatables/

Zoltán Szőgyényi

2 years ago

3.2k
CRUD
design table #####by html,css,js

Hacker Development

1 year ago

1.7k