[{"data":1,"prerenderedAt":69},["Reactive",2],{"blog-post-markdown-table-column-width-cell-padding-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":43,"related":44},"markdown-table-column-width-cell-padding-complete-guide","Markdown Table Column Width and Cell Padding: Complete Guide for Professional Data Presentation","Master advanced Markdown table formatting with column width control, cell padding techniques, responsive design, and professional styling for optimal data presentation across all platforms.","Advanced Markdown table column width and cell padding techniques enable professional data presentation that optimizes readability, visual hierarchy, and responsive behavior across different…","2025-11-07","Tutorial","Matthew Rathbone","markdown table column width, cell padding markdown, table formatting, responsive tables, markdown table styling, data presentation, table design, column sizing",35,"\u003Cp>Advanced Markdown table column width and cell padding techniques enable professional data presentation that optimizes readability, visual hierarchy, and responsive behavior across different viewing environments. By mastering column sizing strategies, padding control, and adaptive table design, content creators can build sophisticated data presentations that maintain clarity and accessibility while accommodating diverse screen sizes and content requirements.\u003C/p>\n\u003Ch2 id=\"why-master-table-column-width-and-padding\">Why Master Table Column Width and Padding?\u003C/h2>\n\u003Cp>Professional table formatting provides essential benefits for data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Control column widths to emphasize important data and create clear information structure\u003C/li>\n\u003Cli>\u003Cstrong>Readability Optimization\u003C/strong>: Proper padding and spacing improve content scanability and reduce cognitive load\u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Adaptive column sizing ensures tables remain usable across desktop, tablet, and mobile devices\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Consistent formatting creates polished, publication-ready data presentations\u003C/li>\n\u003Cli>\u003Cstrong>Content Flexibility\u003C/strong>: Dynamic width management accommodates varying data lengths and types\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-table-layout-concepts\">Foundation Table Layout Concepts\u003C/h2>\n\u003Ch3 id=\"understanding-table-structure-and-sizing\">Understanding Table Structure and Sizing\u003C/h3>\n\u003Cp>Basic principles of Markdown table layout and width control:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Table Structure and Width Fundamentals\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Basic Table with Natural Width\u003C/span>\n\n| Product | Price | Stock | Description |\n|---------|-------|-------|-------------|\n| Laptop | $1,299 | 15 | High-performance business laptop |\n| Mouse | $29 | 150 | Wireless optical mouse |\n| Keyboard | $89 | 75 | Mechanical keyboard with RGB |\n\n\u003Cspan class=\"hljs-section\">## Column Alignment and Visual Impact\u003C/span>\n\n| Left Aligned | Center Aligned | Right Aligned |\n|:-------------|:--------------:|--------------:|\n| Short | Medium Length | Very Long Content Here |\n| Data | Content | Information |\n| Item | Element | Component |\n\n\u003Cspan class=\"hljs-section\">## Width Control Through Content Length\u003C/span>\n\n| ID | Product Name | Extended Description and Features | Price |\n|----|--------------|-----------------------------------|-------|\n| 1 | Laptop | Advanced business laptop with high-resolution display, fast processor, and extended battery life | $1,299 |\n| 2 | Mouse | Ergonomic wireless mouse with precision tracking | $29 |\n| 3 | Keyboard | Premium mechanical keyboard with customizable RGB lighting and programmable keys | $89 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-enhancement-for-precise-control\">HTML Enhancement for Precise Control\u003C/h3>\n\u003Cp>Integrating HTML attributes for advanced table formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced Markdown Table with HTML Styling -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%; border-collapse: collapse;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 10%; padding: 12px; text-align: left; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>ID\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 25%; padding: 12px; text-align: left; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Product\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 45%; padding: 12px; text-align: left; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Description\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 20%; padding: 12px; text-align: right; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Price\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top;"\u003C/span>>\u003C/span>001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;"\u003C/span>>\u003C/span>MacBook Pro\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;"\u003C/span>>\u003C/span>\nProfessional laptop with M2 chip, 16GB RAM, 512GB SSD, and Retina display. Ideal for development, design, and content creation workflows.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$1,999\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top;"\u003C/span>>\u003C/span>002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;"\u003C/span>>\u003C/span>Wireless Mouse\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;"\u003C/span>>\u003C/span>\nErgonomic wireless mouse with precision optical sensor, programmable buttons, and 24-month battery life.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$49\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top;"\u003C/span>>\u003C/span>003\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;"\u003C/span>>\u003C/span>Mechanical Keyboard\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;"\u003C/span>>\u003C/span>\nFull-size mechanical keyboard with Cherry MX switches, RGB backlighting, and programmable macros. Built for professional and gaming use.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$149\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Responsive Table with Adaptive Width -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"overflow-x: auto; margin: 20px 0;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 600px; width: 100%; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, sans-serif;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 60px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;"\u003C/span>>\u003C/span>Rank\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 200px; padding: 15px; text-align: left; font-size: 14px; font-weight: 600;"\u003C/span>>\u003C/span>Technology\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: auto; padding: 15px; text-align: left; font-size: 14px; font-weight: 600;"\u003C/span>>\u003C/span>Description & Use Cases\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;"\u003C/span>>\u003C/span>Adoption\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 120px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;"\u003C/span>>\u003C/span>Growth Rate\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #e9ecef;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; font-weight: 600; color: #343a40;"\u003C/span>>\u003C/span>React\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; line-height: 1.5; color: #6c757d;"\u003C/span>>\u003C/span>\nComponent-based library for building user interfaces. Widely used for single-page applications, mobile apps with React Native, and server-side rendering.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;"\u003C/span>>\u003C/span>85%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #17a2b8; font-weight: 600;"\u003C/span>>\u003C/span>+12%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa; border-bottom: 1px solid #e9ecef;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;"\u003C/span>>\u003C/span>2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; font-weight: 600; color: #343a40;"\u003C/span>>\u003C/span>Vue.js\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; line-height: 1.5; color: #6c757d;"\u003C/span>>\u003C/span>\nProgressive framework for building user interfaces. Known for gentle learning curve and excellent documentation. Great for both small and large applications.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;"\u003C/span>>\u003C/span>72%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #17a2b8; font-weight: 600;"\u003C/span>>\u003C/span>+18%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #e9ecef;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;"\u003C/span>>\u003C/span>3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; font-weight: 600; color: #343a40;"\u003C/span>>\u003C/span>Angular\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; line-height: 1.5; color: #6c757d;"\u003C/span>>\u003C/span>\nFull-featured framework for building scalable web applications. Provides comprehensive tooling, dependency injection, and enterprise-grade architecture patterns.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;"\u003C/span>>\u003C/span>68%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; color: #ffc107; font-weight: 600;"\u003C/span>>\u003C/span>+5%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-in-markdown-integration\">CSS-in-Markdown Integration\u003C/h3>\n\u003Cp>Advanced styling approaches using CSS within Markdown documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- CSS-Enhanced Table Formatting -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Tahoma, Geneva, Verdana, sans-serif;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>, \u003Cspan class=\"hljs-number\">#3498db\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-id\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">8%\u003C/span>; \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; }\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-name\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">22%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-description\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-status\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">15%\u003C/span>; \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; }\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-price\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">10%\u003C/span>; \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right; }\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ecf0f1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#27ae60\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-pending\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f39c12\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-inactive\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e74c3c\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.price-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#27ae60\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-description\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.col-description\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">": "\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"professional-table"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-id"\u003C/span>>\u003C/span>ID\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-name"\u003C/span>>\u003C/span>Service Name\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-description"\u003C/span>>\u003C/span>Features & Description\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-status"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-price"\u003C/span>>\u003C/span>Monthly\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center; font-weight: bold;"\u003C/span>>\u003C/span>001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Service Name"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600; color: #2c3e50;"\u003C/span>>\u003C/span>Premium Hosting\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Features & Description"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-description"\u003C/span>>\u003C/span>\nHigh-performance SSD hosting with 99.9% uptime guarantee, automatic backups, SSL certificates, and 24/7 technical support. Perfect for business websites and e-commerce.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-active"\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Monthly"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"price-cell"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: right;"\u003C/span>>\u003C/span>$29.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center; font-weight: bold;"\u003C/span>>\u003C/span>002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Service Name"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600; color: #2c3e50;"\u003C/span>>\u003C/span>Cloud Storage\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Features & Description"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-description"\u003C/span>>\u003C/span>\nSecure cloud storage with automatic synchronization, file versioning, collaboration tools, and advanced sharing controls. Ideal for teams and content creators.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-pending"\u003C/span>>\u003C/span>Pending\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Monthly"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"price-cell"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: right;"\u003C/span>>\u003C/span>$19.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center; font-weight: bold;"\u003C/span>>\u003C/span>003\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Service Name"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600; color: #2c3e50;"\u003C/span>>\u003C/span>Email Marketing\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Features & Description"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"col-description"\u003C/span>>\u003C/span>\nProfessional email marketing platform with automation workflows, analytics, A/B testing, and responsive templates. Includes CRM integration and detailed reporting.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-inactive"\u003C/span>>\u003C/span>Inactive\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Monthly"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"price-cell"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: right;"\u003C/span>>\u003C/span>$39.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-column-width-strategies\">Advanced Column Width Strategies\u003C/h2>\n\u003Ch3 id=\"percentage-based-width-control\">Percentage-Based Width Control\u003C/h3>\n\u003Cp>Creating flexible, responsive column layouts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Percentage-Based Column Width System -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%; border-collapse: collapse; margin: 20px 0; font-family: system-ui, -apple-system, sans-serif;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">colgroup\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 5%;"\u003C/span>>\u003C/span>   \u003Cspan class=\"hljs-comment\"><!-- ID Column -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 25%;"\u003C/span>>\u003C/span>  \u003Cspan class=\"hljs-comment\"><!-- Name Column -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 40%;"\u003C/span>>\u003C/span>  \u003Cspan class=\"hljs-comment\"><!-- Description Column -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>  \u003Cspan class=\"hljs-comment\"><!-- Category Column -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>  \u003Cspan class=\"hljs-comment\"><!-- Price Column -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">colgroup\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #343a40; color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 8px; text-align: center; font-size: 12px;"\u003C/span>>\u003C/span>#\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; text-align: left; font-size: 14px;"\u003C/span>>\u003C/span>Product Name\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 15px; text-align: left; font-size: 14px;"\u003C/span>>\u003C/span>Detailed Description\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: center; font-size: 14px;"\u003C/span>>\u003C/span>Category\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 10px; text-align: right; font-size: 14px;"\u003C/span>>\u003C/span>Price\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; font-weight: 600; color: #495057;"\u003C/span>>\u003C/span>Wireless Headphones\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; line-height: 1.4; color: #6c757d;"\u003C/span>>\u003C/span>\nPremium over-ear headphones with active noise cancellation, 30-hour battery life, and high-resolution audio support. Features quick-charge capability and premium materials.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;"\u003C/span>>\u003C/span>Electronics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$299\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;"\u003C/span>>\u003C/span>2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; font-weight: 600; color: #495057;"\u003C/span>>\u003C/span>Smart Watch Series X\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; line-height: 1.4; color: #6c757d;"\u003C/span>>\u003C/span>\nAdvanced fitness tracking, heart rate monitoring, GPS, waterproof design, and smartphone integration. Includes multiple sport modes and health analytics dashboard.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;"\u003C/span>>\u003C/span>Wearables\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$399\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;"\u003C/span>>\u003C/span>3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; font-weight: 600; color: #495057;"\u003C/span>>\u003C/span>Portable SSD Drive\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 15px; line-height: 1.4; color: #6c757d;"\u003C/span>>\u003C/span>\nUltra-fast external storage with USB-C connectivity, hardware encryption, shock-resistant design, and cross-platform compatibility. Perfect for professionals and creatives.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;"\u003C/span>>\u003C/span>Storage\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$189\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Alternative Flexible Width Approach -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"overflow-x: auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%; min-width: 700px; border-collapse: collapse; background: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 80px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;"\u003C/span>>\u003C/span>RANK\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: auto; min-width: 200px; padding: 16px 20px; font-size: 13px; font-weight: 700;"\u003C/span>>\u003C/span>FRAMEWORK/LIBRARY\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 35%; padding: 16px 20px; font-size: 13px; font-weight: 700;"\u003C/span>>\u003C/span>KEY FEATURES & BENEFITS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;"\u003C/span>>\u003C/span>STARS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 120px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;"\u003C/span>>\u003C/span>WEEKLY NPM\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 2px solid #f1f3f4;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;"\u003C/span>>\u003C/span>React\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; font-style: italic;"\u003C/span>>\u003C/span>by Meta (Facebook)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px; line-height: 1.5; color: #555;"\u003C/span>>\u003C/span>\nComponent-based architecture, virtual DOM, extensive ecosystem, strong community support, excellent development tools, and flexible state management options.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;"\u003C/span>>\u003C/span>209k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;"\u003C/span>>\u003C/span>18.5M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #fafbfc; border-bottom: 2px solid #f1f3f4;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;"\u003C/span>>\u003C/span>2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;"\u003C/span>>\u003C/span>Vue.js\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; font-style: italic;"\u003C/span>>\u003C/span>by Evan You\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px; line-height: 1.5; color: #555;"\u003C/span>>\u003C/span>\nProgressive framework, gentle learning curve, excellent documentation, two-way data binding, template-based syntax, and great performance optimization.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;"\u003C/span>>\u003C/span>203k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;"\u003C/span>>\u003C/span>4.2M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 2px solid #f1f3f4;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;"\u003C/span>>\u003C/span>3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;"\u003C/span>>\u003C/span>Angular\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; font-style: italic;"\u003C/span>>\u003C/span>by Google\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 20px; line-height: 1.5; color: #555;"\u003C/span>>\u003C/span>\nFull-featured framework, TypeScript integration, dependency injection, comprehensive CLI tools, enterprise-ready architecture, and robust testing utilities.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;"\u003C/span>>\u003C/span>91k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;"\u003C/span>>\u003C/span>2.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-width-management\">Dynamic Width Management\u003C/h3>\n\u003Cp>Creating adaptive tables that respond to content and context:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-width-manager.js - Dynamic table width optimization\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableWidthManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">minColumnWidth\u003C/span>: options.\u003Cspan class=\"hljs-property\">minColumnWidth\u003C/span> || \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxColumnWidth\u003C/span>: options.\u003Cspan class=\"hljs-property\">maxColumnWidth\u003C/span> || \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">responsiveBreakpoint\u003C/span>: options.\u003Cspan class=\"hljs-property\">responsiveBreakpoint\u003C/span> || \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">contentPaddingRatio\u003C/span>: options.\u003Cspan class=\"hljs-property\">contentPaddingRatio\u003C/span> || \u003Cspan class=\"hljs-number\">0.1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">priorityColumns\u003C/span>: options.\u003Cspan class=\"hljs-property\">priorityColumns\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">hiddenColumns\u003C/span>: options.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span> || [],\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableStructure\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateOptimalWidths\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyResponsiveStyles\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupResizeObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addInteractiveFeatures\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTableStructure\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th, thead td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headers).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(rows).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">children\u003C/span>[index]);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> contentLengths = columnCells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> \n                cell ? cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                index,\n                header,\n                \u003Cspan class=\"hljs-attr\">cells\u003C/span>: columnCells,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">avgContentLength\u003C/span>: contentLengths.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, len\u003C/span>) =>\u003C/span> sum + len, \u003Cspan class=\"hljs-number\">0\u003C/span>) / contentLengths.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">maxContentLength\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...contentLengths),\n                \u003Cspan class=\"hljs-attr\">minContentLength\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(...contentLengths),\n                \u003Cspan class=\"hljs-attr\">dataType\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectDataType\u003C/span>(columnCells),\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">priorityColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(index) ? \u003Cspan class=\"hljs-string\">'high'\u003C/span> : \u003Cspan class=\"hljs-string\">'normal'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">hidden\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">hiddenColumns\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(index)\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectDataType\u003C/span>(\u003Cspan class=\"hljs-params\">cells\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleContent = cells.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> \n            cell ? cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() : \u003Cspan class=\"hljs-string\">''\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-comment\">// Detect numeric data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sampleContent.\u003Cspan class=\"hljs-title function_\">every\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">content\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\$?\\d+\\.?\\d*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(content))) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'numeric'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Detect date data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sampleContent.\u003Cspan class=\"hljs-title function_\">every\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">content\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\d{4}-\\d{2}-\\d{2}/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(content))) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Detect short categorical data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sampleContent.\u003Cspan class=\"hljs-title function_\">every\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">content\u003C/span> =>\u003C/span> content.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">20\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'categorical'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Detect long text content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sampleContent.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">content\u003C/span> =>\u003C/span> content.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'mixed'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateOptimalWidths\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalColumns = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> baseWidth = tableWidth / totalColumns;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">column\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> optimalWidth;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (column.\u003Cspan class=\"hljs-property\">dataType\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'numeric'\u003C/span>:\n                    optimalWidth = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">80\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">120\u003C/span>, baseWidth));\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                    optimalWidth = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">100\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">140\u003C/span>, baseWidth));\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'categorical'\u003C/span>:\n                    optimalWidth = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">100\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">150\u003C/span>, baseWidth * \u003Cspan class=\"hljs-number\">0.8\u003C/span>));\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                    optimalWidth = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">200\u003C/span>, baseWidth * \u003Cspan class=\"hljs-number\">1.5\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                    optimalWidth = baseWidth;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Adjust for priority\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column.\u003Cspan class=\"hljs-property\">priority\u003C/span> === \u003Cspan class=\"hljs-string\">'high'\u003C/span>) {\n                optimalWidth *= \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Apply min/max constraints\u003C/span>\n            column.\u003Cspan class=\"hljs-property\">optimalWidth\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">minColumnWidth\u003C/span>,\n                \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxColumnWidth\u003C/span>, optimalWidth)\n            );\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Normalize to fit table width\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">normalizeWidths\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">normalizeWidths\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalOptimalWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, col\u003C/span>) =>\u003C/span> sum + col.\u003Cspan class=\"hljs-property\">optimalWidth\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> ratio = tableWidth / totalOptimalWidth;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">column\u003C/span> =>\u003C/span> {\n            column.\u003Cspan class=\"hljs-property\">finalWidth\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(column.\u003Cspan class=\"hljs-property\">optimalWidth\u003C/span> * ratio);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyResponsiveStyles\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> css = \u003Cspan class=\"hljs-string\">`\n            .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> {\n                width: 100%;\n                border-collapse: collapse;\n                table-layout: fixed;\n            }\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Apply column widths\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">column, index\u003C/span>) =>\u003C/span> {\n            css += \u003Cspan class=\"hljs-string\">`\n                .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> th:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>),\n                .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> td:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>) {\n                    width: \u003Cspan class=\"hljs-subst\">${column.finalWidth}\u003C/span>px;\n                    \u003Cspan class=\"hljs-subst\">${column.hidden ? \u003Cspan class=\"hljs-string\">'display: none;'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                }\n            `\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Responsive styles\u003C/span>\n        css += \u003Cspan class=\"hljs-string\">`\n            @media (max-width: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.responsiveBreakpoint}\u003C/span>px) {\n                .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> {\n                    display: block;\n                    overflow-x: auto;\n                    white-space: nowrap;\n                }\n                \n                \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateMobileStyles()}\u003C/span>\n            }\n        `\u003C/span>;\n        \n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = css;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateMobileStyles\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> mobileCSS = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Hide less important columns on mobile\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">column, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column.\u003Cspan class=\"hljs-property\">priority\u003C/span> !== \u003Cspan class=\"hljs-string\">'high'\u003C/span> && column.\u003Cspan class=\"hljs-property\">dataType\u003C/span> === \u003Cspan class=\"hljs-string\">'text'\u003C/span>) {\n                mobileCSS += \u003Cspan class=\"hljs-string\">`\n                    .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> th:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>),\n                    .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> td:nth-child(\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>) {\n                        display: none;\n                    }\n                `\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> mobileCSS;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupResizeObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">ResizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>();\n            });\n            \n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(observer);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeTimeout\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeTimeout\u003C/span> = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateOptimalWidths\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyResponsiveStyles\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">150\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addInteractiveFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add column resize handles\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">th, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> resizeHandle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            resizeHandle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-resize-handle'\u003C/span>;\n            resizeHandle.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                position: absolute;\n                top: 0;\n                right: 0;\n                width: 4px;\n                height: 100%;\n                background: transparent;\n                cursor: col-resize;\n                user-select: none;\n            `\u003C/span>;\n            \n            th.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n            th.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resizeHandle);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupColumnResize\u003C/span>(resizeHandle, index);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add column visibility toggles\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addColumnToggleControls\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupColumnResize\u003C/span>(\u003Cspan class=\"hljs-params\">handle, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> isResizing = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startX = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startWidth = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        handle.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mousedown'\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">e\u003C/span> =>\u003C/span> {\n            isResizing = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            startX = e.\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            startWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">finalWidth\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'col-resize'\u003C/span>;\n            e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mousemove'\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">e\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isResizing) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> deltaX = e.\u003Cspan class=\"hljs-property\">clientX\u003C/span> - startX;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> newWidth = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">50\u003C/span>, startWidth + deltaX);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">finalWidth\u003C/span> = newWidth;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateColumnWidth\u003C/span>(columnIndex, newWidth);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseup'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isResizing) {\n                isResizing = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateColumnWidth\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex, width\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`style[data-column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>]`\u003C/span>) || \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">`data-column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> th:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>),\n            .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>) {\n                width: \u003Cspan class=\"hljs-subst\">${width}\u003C/span>px !important;\n            }\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!style.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addColumnToggleControls\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        controls.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-column-controls'\u003C/span>;\n        controls.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            margin: 10px 0;\n            padding: 8px;\n            background: #f8f9fa;\n            border-radius: 4px;\n            font-size: 12px;\n        `\u003C/span>;\n        \n        controls.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <strong>Column Visibility:</strong>\n            \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.columnData.map((column, index) => \u003Cspan class=\"hljs-string\">`\n                <label style="margin-left: 15px; cursor: pointer;">\n                    <input type="checkbox" \u003Cspan class=\"hljs-subst\">${!column.hidden ? \u003Cspan class=\"hljs-string\">'checked'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span> \n                           data-column-index="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>" style="margin-right: 4px;">\n                    \u003Cspan class=\"hljs-subst\">${column.title}\u003C/span>\n                </label>\n            `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n        `\u003C/span>;\n        \n        controls.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">e\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnIndex = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">columnIndex\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(columnIndex, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">checked\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(controls, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex, visible\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">hidden\u003C/span> = !visible;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selector = \u003Cspan class=\"hljs-string\">`.dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> th:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>),\n                         .dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span> td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> elements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(selector);\n        elements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> {\n            el.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = visible ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getTableMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">totalWidth\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">averageColumnWidth\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, col\u003C/span>) =>\u003C/span> sum + col.\u003Cspan class=\"hljs-property\">finalWidth\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnData\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnData\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">col\u003C/span> =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: col.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">width\u003C/span>: col.\u003Cspan class=\"hljs-property\">finalWidth\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">dataType\u003C/span>: col.\u003Cspan class=\"hljs-property\">dataType\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: col.\u003Cspan class=\"hljs-property\">priority\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">hidden\u003C/span>: col.\u003Cspan class=\"hljs-property\">hidden\u003C/span>\n            }))\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">observer\u003C/span> =>\u003C/span> observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Remove generated styles\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> styles = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`style[class*="dynamic-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id || \u003Cspan class=\"hljs-string\">'default'\u003C/span>}\u003C/span>"]`\u003C/span>);\n        styles.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">style\u003C/span> =>\u003C/span> style.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Remove controls\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-column-controls'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (controls) controls.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example and initialization\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">initializeDynamicTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.dynamic-width-table'\u003C/span>);\n    \n    tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">table, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n            table.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`dynamic-table-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TableWidthManager\u003C/span>(table, {\n            \u003Cspan class=\"hljs-attr\">minColumnWidth\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxColumnWidth\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">responsiveBreakpoint\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">priorityColumns\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>], \u003Cspan class=\"hljs-comment\">// First two columns are high priority\u003C/span>\n            \u003Cspan class=\"hljs-attr\">hiddenColumns\u003C/span>: [] \u003Cspan class=\"hljs-comment\">// No hidden columns by default\u003C/span>\n        });\n    });\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">readyState\u003C/span> === \u003Cspan class=\"hljs-string\">'loading'\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, initializeDynamicTables);\n} \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">initializeDynamicTables\u003C/span>();\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">TableWidthManager\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"cell-padding-and-spacing-optimization\">Cell Padding and Spacing Optimization\u003C/h2>\n\u003Ch3 id=\"advanced-padding-strategies\">Advanced Padding Strategies\u003C/h3>\n\u003Cp>Creating consistent, readable table layouts with optimal spacing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Advanced Cell Padding Examples -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.padding-demo-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.padding-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.padding-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.padding-standard\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.padding-standard\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.padding-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.padding-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.padding-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.padding-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Contextual padding for different content types */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-numeric\u003C/span> { \n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right; \n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-text\u003C/span> { \n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>; \n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-categorical\u003C/span> { \n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; \n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-header\u003C/span> { \n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>; \n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>; \n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive padding adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.padding-demo-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \n    \u003Cspan class=\"hljs-selector-class\">.padding-demo-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Compact Padding Example -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Compact Table (Dense Data)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"padding-demo-table padding-compact"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #e9ecef;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>ID\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Product\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>SKU\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Stock\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>Price\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Wireless Mouse\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>WM-2024-001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>150\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>$29.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Bluetooth Keyboard\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>BK-2024-002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>75\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>$89.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>003\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>USB-C Hub\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>UC-2024-003\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>45\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>$59.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Standard Padding Example -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Standard Table (Balanced Readability)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"padding-demo-table padding-standard"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: linear-gradient(135deg, #667eea, #764ba2); color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid rgba(255,255,255,0.3);"\u003C/span>>\u003C/span>Customer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid rgba(255,255,255,0.3);"\u003C/span>>\u003C/span>Order Details\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid rgba(255,255,255,0.3);"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid rgba(255,255,255,0.3);"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>Total\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>John Smith\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>john.smith@email.com\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-text"\u003C/span>>\u003C/span>\nPremium Laptop Bundle including wireless mouse, keyboard, and carrying case. Express shipping requested for business use.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #28a745; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;"\u003C/span>>\u003C/span>COMPLETED\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>$1,299.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Sarah Johnson\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>sarah.j@company.com\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-text"\u003C/span>>\u003C/span>\nOffice setup package with ergonomic chair, standing desk, and lighting equipment. Bulk discount applied for corporate purchase.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #ffc107; color: #212529; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;"\u003C/span>>\u003C/span>PROCESSING\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>$2,450.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Comfortable Padding Example -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Comfortable Table (Enhanced Readability)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"padding-demo-table padding-comfortable"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #343a40; color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #495057;"\u003C/span>>\u003C/span>Project Name\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #495057;"\u003C/span>>\u003C/span>Description & Objectives\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #495057;"\u003C/span>>\u003C/span>Timeline\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Budget\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600; font-size: 16px; margin-bottom: 4px;"\u003C/span>>\u003C/span>E-Commerce Platform\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>Internal Project #2024-001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-text"\u003C/span>>\u003C/span>\nDevelopment of a comprehensive e-commerce solution with advanced inventory management, customer analytics, and mobile-responsive design. Integration with existing payment systems and third-party logistics providers.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>8 months\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>Jan - Aug 2024\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$285,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 11px; color: #666;"\u003C/span>>\u003C/span>Approved Budget\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600; font-size: 16px; margin-bottom: 4px;"\u003C/span>>\u003C/span>Mobile App Redesign\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>Internal Project #2024-002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-text"\u003C/span>>\u003C/span>\nComplete redesign of existing mobile application with focus on user experience improvements, performance optimization, and accessibility compliance. Includes user testing and iterative design phases.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>12 weeks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; font-size: 12px;"\u003C/span>>\u003C/span>Mar - May 2024\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 1px solid #dee2e6;"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-numeric"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$120,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 11px; color: #666;"\u003C/span>>\u003C/span>Approved Budget\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Spacious Padding Example -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Spacious Table (Premium Presentation)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"padding-demo-table padding-spacious"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: none; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-radius: 12px; overflow: hidden; background: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 14px; font-weight: 700; letter-spacing: 0.5px;"\u003C/span>>\u003C/span>EXECUTIVE SUMMARY\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 14px; font-weight: 700; letter-spacing: 0.5px;"\u003C/span>>\u003C/span>KEY METRICS & PERFORMANCE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-align: center;"\u003C/span>>\u003C/span>STATUS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 2px solid #f1f3f4; vertical-align: top;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 20px; font-weight: bold; color: #333; margin-bottom: 8px;"\u003C/span>>\u003C/span>Q4 2024 Revenue Report\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #666; line-height: 1.6; font-size: 14px;"\u003C/span>>\u003C/span>\nComprehensive analysis of quarterly performance including regional breakdowns, product category analysis, and year-over-year growth comparisons with actionable insights for strategic planning.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 2px solid #f1f3f4; vertical-align: top;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: flex; flex-wrap: wrap; gap: 12px;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #e3f2fd; padding: 8px 12px; border-radius: 6px; flex: 1; min-width: 120px; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 11px; color: #666; margin-bottom: 2px;"\u003C/span>>\u003C/span>TOTAL REVENUE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #1976d2;"\u003C/span>>\u003C/span>$2.4M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #e8f5e8; padding: 8px 12px; border-radius: 6px; flex: 1; min-width: 120px; text-align: center;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 11px; color: #666; margin-bottom: 2px;"\u003C/span>>\u003C/span>GROWTH RATE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 18px; font-weight: bold; color: #388e3c;"\u003C/span>>\u003C/span>+23%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border-bottom: 2px solid #f1f3f4; text-align: center; vertical-align: middle;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: linear-gradient(135deg, #4caf50, #45a049); color: white; padding: 12px 20px; border-radius: 25px; font-weight: bold; display: inline-block;"\u003C/span>>\u003C/span>\n✓ COMPLETE\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"contextual-padding-systems\">Contextual Padding Systems\u003C/h3>\n\u003Cp>Adaptive padding based on content type and viewing context:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* contextual-padding.css - Intelligent padding system */\u003C/span>\n\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Base padding classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.cell-padding-xs\u003C/span> { \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.cell-padding-sm\u003C/span> { \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.cell-padding-md\u003C/span> { \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.cell-padding-lg\u003C/span> { \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.cell-padding-xl\u003C/span> { \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Content-aware padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.cell-numeric\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-currency\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-percentage\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-date\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-status\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-text-short\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-text-long\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-header-primary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.3px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cell-header-secondary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Context-based adjustments */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-context-dashboard\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-context-dashboard\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-context-report\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-context-report\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-context-presentation\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-context-presentation\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span> \u003Cspan class=\"hljs-number\">22px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Density variations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-density-compact\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-density-compact\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-density-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-density-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive padding adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.cell-text-long\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Interactive padding states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-class\">.row-selected\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: inset \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">#2196f3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print-specific padding */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">11px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessibility enhancements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#2196f3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.smart-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: inset \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">#856404\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-design-and-mobile-optimization\">Responsive Design and Mobile Optimization\u003C/h2>\n\u003Ch3 id=\"mobile-first-table-strategies\">Mobile-First Table Strategies\u003C/h3>\n\u003Cp>Creating tables that work effectively across all device sizes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Mobile-Optimized Responsive Table -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.3px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile breakpoint styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">5px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">35%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">": "\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">30%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child {\n        \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Extra small screens */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">35%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-wrapper"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"mobile-optimized-table"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>Order ID\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 25%;"\u003C/span>>\u003C/span>Customer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 30%;"\u003C/span>>\u003C/span>Products\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>Total\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Order ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #666;"\u003C/span>>\u003C/span>#ORD-001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Customer"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>Emma Thompson\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666;"\u003C/span>>\u003C/span>emma.t@email.com\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Products"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>MacBook Pro 16" (x1)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>Magic Mouse (x1)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; margin-top: 4px;"\u003C/span>>\u003C/span>+ 2 more items\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #28a745; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;"\u003C/span>>\u003C/span>DELIVERED\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Total"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$2,299.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Order ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #666;"\u003C/span>>\u003C/span>#ORD-002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Customer"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>James Wilson\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666;"\u003C/span>>\u003C/span>j.wilson@company.com\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Products"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>iPad Air (x2)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>Apple Pencil (x2)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; margin-top: 4px;"\u003C/span>>\u003C/span>Bulk discount applied\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #ffc107; color: #212529; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;"\u003C/span>>\u003C/span>PROCESSING\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Total"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$1,398.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Order ID"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #666;"\u003C/span>>\u003C/span>#ORD-003\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Customer"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>Sarah Chen\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666;"\u003C/span>>\u003C/span>sarah.chen@startup.co\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Products"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>iPhone 15 Pro (x1)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>MagSafe Charger (x1)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size: 12px; color: #666; margin-top: 4px;"\u003C/span>>\u003C/span>Express shipping\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #17a2b8; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;"\u003C/span>>\u003C/span>SHIPPED\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Total"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745; font-size: 16px;"\u003C/span>>\u003C/span>$1,049.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Alternative Horizontal Scroll Approach -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.scroll-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">700px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>, \u003Cspan class=\"hljs-number\">#3498db\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Sticky first column */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child,\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">5px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2c3e50\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">15\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile scroll indicators */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.scroll-table-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"← Scroll to see more →"\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.scroll-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scroll-table-container"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scroll-table"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 100px;"\u003C/span>>\u003C/span>Employee\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 120px;"\u003C/span>>\u003C/span>Department\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 150px;"\u003C/span>>\u003C/span>Position\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 100px;"\u003C/span>>\u003C/span>Hire Date\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 100px;"\u003C/span>>\u003C/span>Salary\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 120px;"\u003C/span>>\u003C/span>Performance\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"min-width: 100px;"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>Alice Johnson\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Engineering\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Senior Software Engineer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2022-03-15\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$95,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>⭐⭐⭐⭐⭐\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #28a745; color: white; padding: 2px 6px; border-radius: 8px; font-size: 10px;"\u003C/span>>\u003C/span>ACTIVE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>Bob Smith\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Marketing\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Marketing Manager\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2021-11-08\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$78,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>⭐⭐⭐⭐\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #28a745; color: white; padding: 2px 6px; border-radius: 8px; font-size: 10px;"\u003C/span>>\u003C/span>ACTIVE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: 600;"\u003C/span>>\u003C/span>Carol Davis\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Design\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>UX/UI Designer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2023-01-20\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight: bold; color: #28a745;"\u003C/span>>\u003C/span>$72,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>⭐⭐⭐⭐⭐\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #ffc107; color: #212529; padding: 2px 6px; border-radius: 8px; font-size: 10px;"\u003C/span>>\u003C/span>REVIEW\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-enhancement-framework\">Progressive Enhancement Framework\u003C/h3>\n\u003Cp>Building adaptive table systems that enhance based on capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// progressive-table-enhancer.js - Progressive table enhancement system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableSorting\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFiltering\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableFiltering\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableResizing\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableResizing\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableExport\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableExport\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">mobileBreakpoint\u003C/span>: options.\u003Cspan class=\"hljs-property\">mobileBreakpoint\u003C/span> || \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">compactBreakpoint\u003C/span>: options.\u003Cspan class=\"hljs-property\">compactBreakpoint\u003C/span> || \u003Cspan class=\"hljs-number\">480\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">adaptivePadding\u003C/span>: options.\u003Cspan class=\"hljs-property\">adaptivePadding\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">stickyHeaders\u003C/span>: options.\u003Cspan class=\"hljs-property\">stickyHeaders\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">touchSupport\u003C/span>: \u003Cspan class=\"hljs-string\">'ontouchstart'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">resizeObserver\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">ResizeObserver\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">intersectionObserver\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">IntersectionObserver\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cssGrid\u003C/span>: \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-title function_\">supports\u003C/span>(\u003Cspan class=\"hljs-string\">'display'\u003C/span>, \u003Cspan class=\"hljs-string\">'grid'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">customProperties\u003C/span>: \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-title function_\">supports\u003C/span>(\u003Cspan class=\"hljs-string\">'color'\u003C/span>, \u003Cspan class=\"hljs-string\">'var(--test)'\u003C/span>),\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">assessTableComplexity\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyBaseStyles\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementResponsiveStrategy\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addProgressiveFeatures\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeForAccessibility\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">assessTableComplexity\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th, thead td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellContent = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">td\u003C/span> =>\u003C/span> td.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: columns.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">avgCellLength\u003C/span>: cellContent.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, len\u003C/span>) =>\u003C/span> sum + len, \u003Cspan class=\"hljs-number\">0\u003C/span>) / cellContent.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxCellLength\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...cellContent),\n            \u003Cspan class=\"hljs-attr\">hasLongContent\u003C/span>: cellContent.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">len\u003C/span> =>\u003C/span> len > \u003Cspan class=\"hljs-number\">100\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">isWide\u003C/span>: columns.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">6\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isTall\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">20\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalCells\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span> * columns.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Determine optimal strategy\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">determineOptimalStrategy\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">determineOptimalStrategy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { columnCount, rowCount, hasLongContent, isWide, isTall } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnCount <= \u003Cspan class=\"hljs-number\">3\u003C/span> && !hasLongContent) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'simple-responsive'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnCount <= \u003Cspan class=\"hljs-number\">5\u003C/span> && rowCount <= \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'card-transform'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isWide || hasLongContent) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'horizontal-scroll'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isTall) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'virtual-scroll'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'adaptive-hybrid'\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyBaseStyles\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> styleId = \u003Cspan class=\"hljs-string\">`progressive-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateId()}\u003C/span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingStyle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(styleId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingStyle) existingStyle.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">id\u003C/span> = styleId;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> css = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateBaseCSS\u003C/span>();\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = css;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'progressive-table'\u003C/span>, \u003Cspan class=\"hljs-string\">`strategy-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.strategy}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateBaseCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            .progressive-table {\n                width: 100%;\n                border-collapse: collapse;\n                margin: 20px 0;\n                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n                background: white;\n                border-radius: 8px;\n                overflow: hidden;\n                box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n            }\n            \n            .progressive-table th {\n                background: linear-gradient(135deg, #667eea, #764ba2);\n                color: white;\n                padding: 16px 20px;\n                text-align: left;\n                font-weight: 600;\n                font-size: 14px;\n                position: relative;\n            }\n            \n            .progressive-table td {\n                padding: 14px 20px;\n                border-bottom: 1px solid #f0f0f0;\n                vertical-align: top;\n                transition: background-color 0.15s ease;\n            }\n            \n            .progressive-table tbody tr:hover td {\n                background-color: #f8f9fa;\n            }\n            \n            \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateStrategyCSS()}\u003C/span>\n            \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateResponsiveCSS()}\u003C/span>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateStrategyCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'simple-responsive'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                    @media (max-width: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.mobileBreakpoint}\u003C/span>px) {\n                        .strategy-simple-responsive td,\n                        .strategy-simple-responsive th {\n                            padding: 10px 12px;\n                            font-size: 13px;\n                        }\n                    }\n                `\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'card-transform'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                    @media (max-width: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.mobileBreakpoint}\u003C/span>px) {\n                        .strategy-card-transform,\n                        .strategy-card-transform thead,\n                        .strategy-card-transform tbody,\n                        .strategy-card-transform th,\n                        .strategy-card-transform td,\n                        .strategy-card-transform tr {\n                            display: block;\n                        }\n                        \n                        .strategy-card-transform thead tr {\n                            position: absolute;\n                            top: -9999px;\n                            left: -9999px;\n                        }\n                        \n                        .strategy-card-transform tr {\n                            border: 1px solid #ddd;\n                            margin-bottom: 15px;\n                            padding: 15px;\n                            border-radius: 8px;\n                            background: white;\n                        }\n                        \n                        .strategy-card-transform td {\n                            border: none;\n                            position: relative;\n                            padding-left: 35% !important;\n                        }\n                        \n                        .strategy-card-transform td:before {\n                            content: attr(data-label) ": ";\n                            position: absolute;\n                            left: 6px;\n                            width: 30%;\n                            text-align: right;\n                            font-weight: bold;\n                            color: #333;\n                        }\n                    }\n                `\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'horizontal-scroll'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                    .strategy-horizontal-scroll {\n                        display: block;\n                        overflow-x: auto;\n                        white-space: nowrap;\n                    }\n                    \n                    .strategy-horizontal-scroll table {\n                        min-width: 100%;\n                    }\n                    \n                    .strategy-horizontal-scroll th:first-child,\n                    .strategy-horizontal-scroll td:first-child {\n                        position: sticky;\n                        left: 0;\n                        background: white;\n                        z-index: 2;\n                    }\n                    \n                    .strategy-horizontal-scroll thead th:first-child {\n                        background: #667eea;\n                        z-index: 3;\n                    }\n                `\u003C/span>;\n                \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateResponsiveCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            @media (max-width: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.compactBreakpoint}\u003C/span>px) {\n                .progressive-table th,\n                .progressive-table td {\n                    padding: 8px 10px !important;\n                    font-size: 12px !important;\n                }\n            }\n            \n            @media print {\n                .progressive-table {\n                    box-shadow: none;\n                    border: 1px solid #ddd;\n                }\n                \n                .progressive-table th,\n                .progressive-table td {\n                    padding: 6px 8px !important;\n                    font-size: 10px !important;\n                }\n            }\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementResponsiveStrategy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span> === \u003Cspan class=\"hljs-string\">'card-transform'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addDataLabels\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span> === \u003Cspan class=\"hljs-string\">'horizontal-scroll'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">wrapInScrollContainer\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span> === \u003Cspan class=\"hljs-string\">'virtual-scroll'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addDataLabels\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers[index]) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, headers[index].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                }\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">wrapInScrollContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-scroll-wrapper'\u003C/span>;\n        wrapper.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            overflow-x: auto;\n            border-radius: 8px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n            background: white;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(wrapper, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add scroll indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addScrollIndicators\u003C/span>(wrapper);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addScrollIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> leftIndicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rightIndicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \n        [leftIndicator, rightIndicator].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">indicator, index\u003C/span>) =>\u003C/span> {\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`scroll-indicator \u003Cspan class=\"hljs-subst\">${index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'left'\u003C/span> : \u003Cspan class=\"hljs-string\">'right'\u003C/span>}\u003C/span>`\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                position: absolute;\n                top: 0;\n                \u003Cspan class=\"hljs-subst\">${index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'left: 0;'\u003C/span> : \u003Cspan class=\"hljs-string\">'right: 0;'\u003C/span>}\u003C/span>\n                width: 20px;\n                height: 100%;\n                background: linear-gradient(\u003Cspan class=\"hljs-subst\">${index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'90deg'\u003C/span> : \u003Cspan class=\"hljs-string\">'270deg'\u003C/span>}\u003C/span>, rgba(0,0,0,0.1), transparent);\n                pointer-events: none;\n                z-index: 5;\n                opacity: 0;\n                transition: opacity 0.3s ease;\n            `\u003C/span>;\n            container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n        });\n        \n        container.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { scrollLeft, scrollWidth, clientWidth } = container;\n            \n            leftIndicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = scrollLeft > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'1'\u003C/span> : \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n            rightIndicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = scrollLeft < scrollWidth - clientWidth ? \u003Cspan class=\"hljs-string\">'1'\u003C/span> : \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addProgressiveFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSorting\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-number\">5\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableFiltering\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-number\">10\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFilteringCapability\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableResizing\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addColumnResizing\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">stickyHeaders\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span>.\u003Cspan class=\"hljs-property\">isTall\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">makeStickyHeaders\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n        \n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n            header.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> += \u003Cspan class=\"hljs-string\">' <span class="sort-indicator">↕️</span>'\u003C/span>;\n            \n            header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(index);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isNumeric = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isNumericColumn\u003C/span>(columnIndex);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> aVal = a.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bVal = b.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isNumeric) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aVal) - \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bVal);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> aVal.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bVal);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isNumericColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`tbody tr td:nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleValues = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sampleValues.\u003Cspan class=\"hljs-title function_\">every\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">val\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\$?\\d+\\.?\\d*%?$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(val));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>();\n            });\n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'orientationchange'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(), \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAdaptivePadding\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResponsiveStrategy\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyAdaptivePadding\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">adaptivePadding\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">complexity\u003C/span>.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgColumnWidth = tableWidth / columnCount;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> paddingClass = \u003Cspan class=\"hljs-string\">'cell-padding-md'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (avgColumnWidth < \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n            paddingClass = \u003Cspan class=\"hljs-string\">'cell-padding-xs'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (avgColumnWidth < \u003Cspan class=\"hljs-number\">150\u003C/span>) {\n            paddingClass = \u003Cspan class=\"hljs-string\">'cell-padding-sm'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (avgColumnWidth > \u003Cspan class=\"hljs-number\">250\u003C/span>) {\n            paddingClass = \u003Cspan class=\"hljs-string\">'cell-padding-lg'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/cell-padding-\\w+/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(paddingClass);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeForAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Data table with sortable columns'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add keyboard navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Announce changes to screen readers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> announcement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        announcement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        announcement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        announcement.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n        announcement.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0,0,0,0);\n            white-space: nowrap;\n            border: 0;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(announcement, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">announcement\u003C/span> = announcement;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceChange\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">announcement\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">announcement\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">announcement\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">random\u003C/span>().\u003Cspan class=\"hljs-title function_\">toString\u003C/span>(\u003Cspan class=\"hljs-number\">36\u003C/span>).\u003Cspan class=\"hljs-title function_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean up event listeners and observers\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Remove generated styles\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Reset table to original state\u003C/span>\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize progressive tables\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table[data-progressive="true"]'\u003C/span>);\n    \n    tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> || \u003Cspan class=\"hljs-string\">'{}'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancer\u003C/span>(table, options);\n    });\n});\n\n\u003Cspan class=\"hljs-comment\">// Export for module systems\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancer\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-workflows\">Integration with Modern Workflows\u003C/h2>\n\u003Cp>Table column width and cell padding techniques integrate seamlessly with comprehensive content management systems. When combined with \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive image optimization\u003C/a>, professional table formatting creates cohesive documentation that maintains visual consistency across text, images, and data presentation while adapting to different viewing environments and device capabilities.\u003C/p>\n\u003Cp>For advanced content architectures, table formatting works effectively with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows and CI/CD integration\u003C/a> by ensuring that automated content processing maintains proper table formatting, validates column width specifications, and applies consistent padding standards across large documentation projects while supporting efficient content production and deployment processes.\u003C/p>\n\u003Cp>When building sophisticated documentation systems, column width management complements \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting and code presentation\u003C/a> by creating technical documentation that seamlessly integrates formatted code examples within properly sized table cells, maintaining readability and preventing layout conflicts between code blocks and table structures.\u003C/p>\n\u003Ch2 id=\"performance-optimization-and-best-practices\">Performance Optimization and Best Practices\u003C/h2>\n\u003Ch3 id=\"efficient-rendering-strategies\">Efficient Rendering Strategies\u003C/h3>\n\u003Cp>Optimizing table performance for large datasets and complex layouts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-performance-optimizer.js - Performance optimization utilities\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TablePerformanceOptimizer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">virtualScrollThreshold\u003C/span>: options.\u003Cspan class=\"hljs-property\">virtualScrollThreshold\u003C/span> || \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">lazyRenderThreshold\u003C/span>: options.\u003Cspan class=\"hljs-property\">lazyRenderThreshold\u003C/span> || \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: options.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span> || \u003Cspan class=\"hljs-number\">150\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableVirtualization\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableVirtualization\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableLazyRendering\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableLazyRendering\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCaching\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableCaching\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxVisibleRows\u003C/span>: options.\u003Cspan class=\"hljs-property\">maxVisibleRows\u003C/span> || \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderQueue\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">renderTime\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">scrollEvents\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheHits\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheMisses\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableSize\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">determineOptimizationStrategy\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementOptimizations\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTableSize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cellCount\u003C/span>: cells.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">avgCellContent\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAverageContentLength\u003C/span>(cells),\n            \u003Cspan class=\"hljs-attr\">estimatedMemory\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(cells),\n            \u003Cspan class=\"hljs-attr\">isLarge\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollThreshold\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateAverageContentLength\u003C/span>(\u003Cspan class=\"hljs-params\">cells\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalLength = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, cell\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> sum + (cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>?.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> totalLength / cells.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">cells\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgContentLength = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAverageContentLength\u003C/span>(cells);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgBytesPerCell = avgContentLength * \u003Cspan class=\"hljs-number\">2\u003C/span>; \u003Cspan class=\"hljs-comment\">// Rough estimate for UTF-16\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlOverhead = \u003Cspan class=\"hljs-number\">100\u003C/span>; \u003Cspan class=\"hljs-comment\">// Rough estimate for HTML markup per cell\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-property\">length\u003C/span> * (avgBytesPerCell + htmlOverhead);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">determineOptimizationStrategy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { rowCount, cellCount, isLarge } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">useVirtualization\u003C/span>: isLarge && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableVirtualization\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useLazyRendering\u003C/span>: rowCount > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">lazyRenderThreshold\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableLazyRendering\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useIntersectionObserver\u003C/span>: \u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useRequestIdleCallback\u003C/span>: \u003Cspan class=\"hljs-string\">'requestIdleCallback'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useCaching\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableCaching\u003C/span> && cellCount > \u003Cspan class=\"hljs-number\">1000\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useVirtualization\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useLazyRendering\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementLazyRendering\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useCaching\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCaching\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeCSS\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounceScrollEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualScrollContainer\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createViewport\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span> = {\n            container,\n            viewport,\n            \u003Cspan class=\"hljs-attr\">rowHeight\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateRowHeight\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">visibleStartIndex\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">visibleEndIndex\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxVisibleRows\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">renderedRows\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupVirtualScrollEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualScrollContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scroll-container'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: 400px;\n            overflow-y: auto;\n            position: relative;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createViewport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        viewport.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scroll-viewport'\u003C/span>;\n        viewport.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.virtualScrollData.rowHeight * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.tableSize.rowCount}\u003C/span>px;\n            position: relative;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(viewport);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> viewport;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateRowHeight\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!sampleRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">40\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C/span>(sampleRow);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> height = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(style.\u003Cspan class=\"hljs-property\">height\u003C/span>) || \u003Cspan class=\"hljs-number\">40\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> marginTop = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(style.\u003Cspan class=\"hljs-property\">marginTop\u003C/span>) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> marginBottom = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(style.\u003Cspan class=\"hljs-property\">marginBottom\u003C/span>) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> height + marginTop + marginBottom;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupVirtualScrollEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { container } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollTimeout;\n        container.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(scrollTimeout);\n            scrollTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>();\n            }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>++;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { container, rowHeight } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = container.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = container.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / rowHeight);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n            startIndex + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(containerHeight / rowHeight) + \u003Cspan class=\"hljs-number\">5\u003C/span>, \u003Cspan class=\"hljs-comment\">// 5 rows buffer\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>.\u003Cspan class=\"hljs-property\">visibleStartIndex\u003C/span> = startIndex;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>.\u003Cspan class=\"hljs-property\">visibleEndIndex\u003C/span> = endIndex;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { visibleStartIndex, visibleEndIndex, renderedRows } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollData\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Remove rows that are no longer visible\u003C/span>\n        renderedRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index < visibleStartIndex || index >= visibleEndIndex) {\n                row.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n                renderedRows.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add newly visible rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = visibleStartIndex; i < visibleEndIndex; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!renderedRows.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(i)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualRow\u003C/span>(i);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row) {\n                    tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row);\n                    renderedRows.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(i, row);\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Position the table correctly\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${visibleStartIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.virtualScrollData.rowHeight}\u003C/span>px)`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualRow\u003C/span>(\u003Cspan class=\"hljs-params\">index\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This would be customized based on your data source\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For now, we'll work with existing rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sourceRow = allRows[index];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!sourceRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sourceRow.\u003Cspan class=\"hljs-title function_\">cloneNode\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementLazyRendering\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useIntersectionObserver\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(entries),\n            {\n                \u003Cspan class=\"hljs-attr\">root\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-container'\u003C/span>) || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'100px'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span>\n            }\n        );\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">lazyRenderThreshold\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">prepareLazyRow\u003C/span>(row);\n                observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(row);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(observer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">prepareLazyRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">lazyContent\u003C/span> = content;\n            cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<div class="lazy-placeholder">Loading...</div>'\u003C/span>;\n        });\n        \n        row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy-row'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderLazyRow\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderLazyRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">renderCells\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">lazyContent\u003C/span>) {\n                    cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">lazyContent\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">delete\u003C/span> cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">lazyContent\u003C/span>;\n                }\n            });\n            \n            row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy-row'\u003C/span>);\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useRequestIdleCallback\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">requestIdleCallback\u003C/span>(renderCells);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(renderCells, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupCaching\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Cache expensive operations like sorting, filtering, calculations\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Implement cache invalidation on data changes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutations\u003C/span> =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutation\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'childList'\u003C/span> || mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'characterData'\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">invalidateCache\u003C/span>();\n                }\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">characterData\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(observer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">invalidateCache\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCached\u003C/span>(\u003Cspan class=\"hljs-params\">key, computeFn\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(key)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span>++;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(key);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span>++;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">computeFn\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, result);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add performance-optimized CSS\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            .performance-optimized-table {\n                table-layout: fixed;\n                will-change: transform;\n            }\n            \n            .performance-optimized-table td,\n            .performance-optimized-table th {\n                contain: layout style paint;\n            }\n            \n            .lazy-row {\n                contain: layout;\n            }\n            \n            .lazy-placeholder {\n                height: 20px;\n                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n                background-size: 200% 100%;\n                animation: loading 1.5s infinite;\n            }\n            \n            @keyframes loading {\n                0% { background-position: 200% 0; }\n                100% { background-position: -200% 0; }\n            }\n            \n            .virtual-scroll-container {\n                transform: translateZ(0);\n            }\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'performance-optimized-table'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">debounceScrollEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollTimeout;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(scrollTimeout);\n            scrollTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleOptimizedScroll\u003C/span>(e);\n            }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleOptimizedScroll\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement optimized scroll handling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>.\u003Cspan class=\"hljs-property\">useIntersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Intersection Observer will handle visibility updates\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Fallback for browsers without Intersection Observer\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVisibleElements\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateVisibleElements\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableRect = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowRect = row.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isVisible = rowRect.\u003Cspan class=\"hljs-property\">top\u003C/span> < tableRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> && rowRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> > tableRect.\u003Cspan class=\"hljs-property\">top\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isVisible && row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy-row'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderLazyRow\u003C/span>(row);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Monitor rendering performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'performance'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">list\u003C/span>) =>\u003C/span> {\n                list.\u003Cspan class=\"hljs-title function_\">getEntries\u003C/span>().\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entry\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render'\u003C/span>)) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(entry.\u003Cspan class=\"hljs-property\">duration\u003C/span>);\n                    }\n                });\n            });\n            \n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>({ \u003Cspan class=\"hljs-attr\">entryTypes\u003C/span>: [\u003Cspan class=\"hljs-string\">'measure'\u003C/span>] });\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(observer);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">measurePerformance\u003C/span>(\u003Cspan class=\"hljs-params\">operationName, operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startMark = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${operationName}\u003C/span>-start`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endMark = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${operationName}\u003C/span>-end`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> measureName = \u003Cspan class=\"hljs-string\">`table-render-\u003Cspan class=\"hljs-subst\">${operationName}\u003C/span>`\u003C/span>;\n        \n        performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(startMark);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">operation\u003C/span>();\n        performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(endMark);\n        performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(measureName, startMark, endMark);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgRenderTime = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>\n            ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, time\u003C/span>) =>\u003C/span> sum + time, \u003Cspan class=\"hljs-number\">0\u003C/span>) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">tableSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">strategy\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">strategy\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">renderTimes\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">average\u003C/span>: avgRenderTime,\n                \u003Cspan class=\"hljs-attr\">count\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">recent\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">5\u003C/span>)\n            },\n            \u003Cspan class=\"hljs-attr\">cache\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">hits\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">misses\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">hitRatio\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> / (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span>) || \u003Cspan class=\"hljs-number\">0\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">scrollEvents\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memoryEstimate\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSize\u003C/span>.\u003Cspan class=\"hljs-property\">estimatedMemory\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean up observers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">observer\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (observer.\u003Cspan class=\"hljs-property\">disconnect\u003C/span>) observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Clear cache\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Remove performance monitoring\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> largeTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table[data-optimize="true"]'\u003C/span>);\n    \n    largeTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = {\n            \u003Cspan class=\"hljs-attr\">virtualScrollThreshold\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">virtualThreshold\u003C/span>) || \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">lazyRenderThreshold\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">lazyThreshold\u003C/span>) || \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableVirtualization\u003C/span>: table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">enableVirtual\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableLazyRendering\u003C/span>: table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">enableLazy\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCaching\u003C/span>: table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">enableCache\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TablePerformanceOptimizer\u003C/span>(table, options);\n    });\n});\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">TablePerformanceOptimizer\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"column-width-conflicts\">Column Width Conflicts\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Columns don't maintain specified widths or overlap content\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Column Width Debugging Utilities */\u003C/span>\n\n\u003Cspan class=\"hljs-selector-class\">.debug-table-layout\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid red;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.debug-table-layout\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.debug-table-layout\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid blue;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">text-overflow\u003C/span>: ellipsis;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.debug-table-layout\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.debug-table-layout\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(style);\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: red;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix common width issues */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.width-fix-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.width-fix-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.width-fix-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.width-fix-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">overflow-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-padding-problems\">Mobile Padding Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Padding becomes too cramped or excessive on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile Padding Fixes */\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cell-text-long\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-padding-fix\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"platform-rendering-inconsistencies\">Platform Rendering Inconsistencies\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables render differently across various Markdown processors\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Platform-Safe Table Template -->\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-responsive"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%; border-collapse: collapse; margin: 20px 0;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">colgroup\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 20%;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 30%;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 35%;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">col\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 15%;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">colgroup\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color: #f8f9fa;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;"\u003C/span>>\u003C/span>Column 1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;"\u003C/span>>\u003C/span>Column 2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;"\u003C/span>>\u003C/span>Column 3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;"\u003C/span>>\u003C/span>Column 4\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 16px; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Data 1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 16px; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Data 2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 16px; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Data 3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding: 10px 16px; border: 1px solid #dee2e6;"\u003C/span>>\u003C/span>Data 4\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table column width and cell padding techniques provide the foundation for creating professional, accessible, and responsive data presentations that serve users effectively across all platforms and devices. By mastering width control strategies, padding optimization, and responsive design principles, content creators can build sophisticated table layouts that maintain clarity and usability while accommodating diverse viewing contexts and user needs.\u003C/p>\n\u003Cp>The key to successful table formatting lies in understanding the relationship between content structure, visual presentation, and user interaction patterns. Whether you're creating dashboard layouts, data reports, or interactive documentation, the techniques covered in this guide provide the tools needed to create table designs that balance aesthetic appeal with functional requirements while ensuring accessibility and performance across the modern web ecosystem.\u003C/p>\n\u003Cp>Remember to test your table designs across target platforms, implement responsive strategies that enhance rather than compromise usability, and maintain consistent formatting standards that support your content's goals and user expectations. With proper attention to column width and cell padding, your Markdown tables can achieve the professional presentation quality that modern audiences expect while remaining maintainable and accessible to all users.\u003C/p>\n",[15,19,22,25,28,31,34,37,40],{"id":16,"text":17,"level":18},"why-master-table-column-width-and-padding","Why Master Table Column Width and Padding?",2,{"id":20,"text":21,"level":18},"foundation-table-layout-concepts","Foundation Table Layout Concepts",{"id":23,"text":24,"level":18},"advanced-column-width-strategies","Advanced Column Width Strategies",{"id":26,"text":27,"level":18},"cell-padding-and-spacing-optimization","Cell Padding and Spacing Optimization",{"id":29,"text":30,"level":18},"responsive-design-and-mobile-optimization","Responsive Design and Mobile Optimization",{"id":32,"text":33,"level":18},"integration-with-modern-workflows","Integration with Modern Workflows",{"id":35,"text":36,"level":18},"performance-optimization-and-best-practices","Performance Optimization and Best Practices",{"id":38,"text":39,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":41,"text":42,"level":18},"conclusion","Conclusion",[],[45,53,61],{"slug":46,"title":47,"description":48,"excerpt":49,"date":50,"category":9,"author":10,"keywords":51,"readingMinutes":52},"markdown-table-column-width-alignment-complete-guide","Markdown Table Column Width and Alignment: Complete Guide for Professional Data Presentation and Layout Control","Master table column width and alignment controls in Markdown for professional data presentation. Learn CSS integration, responsive design techniques, and advanced table formatting for optimal readability and visual organization.","Table column width and alignment control in Markdown enables professional data presentation that transforms basic tabular information into visually organized, responsive layouts with precise…","2025-09-14","markdown table width, table column alignment, markdown table css, responsive tables markdown, table formatting markdown, professional table design, markdown data presentation, table layout control",19,{"slug":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":60},"markdown-table-cell-merging-and-advanced-formatting","Markdown Table Cell Merging and Advanced Formatting: Complete Guide for Professional Data Presentation","Master advanced table formatting in Markdown including cell merging, column spanning, row grouping, and complex table layouts. Learn platform-specific features and professional table design techniques.","Advanced Markdown table formatting capabilities extend far beyond basic grid layouts, offering sophisticated cell merging, column spanning, and professional formatting options that transform…","2025-12-13","markdown table merging, markdown table formatting, advanced markdown tables, cell spanning markdown, table design markdown, markdown table styling, professional markdown tables",13,{"slug":62,"title":63,"description":64,"excerpt":65,"date":66,"category":9,"author":10,"keywords":67,"readingMinutes":68},"markdown-table-cell-alignment-justify-complete-guide","Markdown Table Cell Alignment and Justify: Complete Guide for Professional Data Presentation and Typography Control","Master Markdown table cell alignment techniques including left, right, center, and justify alignment. Learn CSS integration, responsive alignment, and advanced typography control for professional data presentation.","Advanced table cell alignment and justification techniques in Markdown enable sophisticated data presentation that transforms raw information into visually compelling, professionally formatted…","2025-11-11","markdown table alignment, table cell alignment, markdown table justify, table text alignment, markdown table css styling, table typography control, professional table alignment, markdown table formatting",16,1792184944435]