[{"data":1,"prerenderedAt":75},["Reactive",2],{"blog-post-markdown-table-column-width-alignment-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":49,"related":50},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>Table column width and alignment control in Markdown enables professional data presentation that transforms basic tabular information into visually organized, responsive layouts with precise control over content positioning and space utilization. While standard Markdown tables provide basic functionality, advanced techniques using CSS integration, responsive design principles, and platform-specific implementations create sophisticated data displays that enhance readability and professional appearance.\u003C/p>\n\u003Ch2 id=\"why-control-table-column-width-and-alignment\">Why Control Table Column Width and Alignment?\u003C/h2>\n\u003Cp>Professional table formatting provides essential benefits for data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data Clarity\u003C/strong>: Proper column widths prevent content overflow and ensure information remains readable\u003C/li>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Strategic alignment creates clear relationships between data elements  \u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Controlled layouts maintain functionality across different screen sizes\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Consistent formatting elevates documentation quality and user experience\u003C/li>\n\u003Cli>\u003Cstrong>Information Density\u003C/strong>: Optimized spacing maximizes data visibility within available space\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"understanding-markdown-table-basics\">Understanding Markdown Table Basics\u003C/h2>\n\u003Ch3 id=\"standard-markdown-table-syntax\">Standard Markdown Table Syntax\u003C/h3>\n\u003Cp>Basic Markdown tables provide foundation for advanced formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Table Structure\u003C/span>\n\n| Product Name | Category | Price | Availability |\n|--------------|----------|-------|--------------|\n| Wireless Headphones | Electronics | $99.99 | In Stock |\n| Office Chair | Furniture | $299.00 | Limited |\n| Laptop Stand | Accessories | $49.95 | Out of Stock |\n| Desk Organizer | Office Supplies | $24.99 | In Stock |\n\n\u003Cspan class=\"hljs-section\"># Table with Basic Alignment\u003C/span>\n| Left Aligned | Center Aligned | Right Aligned |\n|:-------------|:--------------:|--------------:|\n| Content flows naturally from left | Content centers within column | Content aligns to right edge |\n| Multiple lines wrap to new row | Maintains center position | Numbers align for comparison |\n| Default behavior in most cases | Best for headers and labels | Ideal for numerical data |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"column-alignment-fundamentals\">Column Alignment Fundamentals\u003C/h3>\n\u003Cp>Markdown supports three alignment types through colon positioning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Alignment Syntax Reference\u003C/span>\n\n| Syntax | Alignment | Use Case | Example |\n|:-------|:---------:|:---------|--------:|\n| \u003Cspan class=\"hljs-code\">`|:------|`\u003C/span> | Left (default) | Text content, descriptions | Product names |\n| \u003Cspan class=\"hljs-code\">`|:-----:|`\u003C/span> | Center | Headers, status indicators | Active/Inactive |\n| \u003Cspan class=\"hljs-code\">`|------:|`\u003C/span> | Right | Numerical data, prices | $1,299.99 |\n\n\u003Cspan class=\"hljs-section\"># Real-World Example: Financial Report\u003C/span>\n| Account | Description | Debit | Credit | Balance |\n|:--------|:-----------|------:|-------:|--------:|\n| 1001 | Cash in Bank | $0.00 | $5,000.00 | $5,000.00 |\n| 1002 | Accounts Receivable | $2,500.00 | $0.00 | $2,500.00 |\n| 2001 | Accounts Payable | $0.00 | $1,200.00 | -$1,200.00 |\n| 3001 | Owner's Equity | $0.00 | $6,300.00 | -$6,300.00 |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-integration-for-advanced-control\">CSS Integration for Advanced Control\u003C/h2>\n\u003Ch3 id=\"inline-styling-for-immediate-control\">Inline Styling for Immediate Control\u003C/h3>\n\u003Cp>Direct HTML and CSS integration within Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Custom Table Styling Examples\u003C/span>\n\n\u003Cspan class=\"language-xml\">\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: 2em 0;"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr style="background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;">\n      <th style="width: 25%; padding: 12px; text-align: left; font-weight: 600;">Feature</th>\n      <th style="width: 15%; padding: 12px; text-align: center; font-weight: 600;">Basic Plan</th>\n      <th style="width: 15%; padding: 12px; text-align: center; font-weight: 600;">Pro Plan</th>\n      <th style="width: 15%; padding: 12px; text-align: center; font-weight: 600;">Enterprise</th>\n      <th style="width: 30%; padding: 12px; text-align: left; font-weight: 600;">Notes</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr style="border-bottom: 1px solid #dee2e6;">\n      <td style="padding: 12px; font-weight: 500;">User Accounts</td>\n      <td style="padding: 12px; text-align: center;">5</td>\n      <td style="padding: 12px; text-align: center;">25</td>\n      <td style="padding: 12px; text-align: center;">Unlimited</td>\n      <td style="padding: 12px; color: #6c757d; font-size: 0.9em;">Additional users $5/month each</td>\n    </tr>\n    <tr style="border-bottom: 1px solid #dee2e6;">\n      <td style="padding: 12px; font-weight: 500;">Storage Space</td>\n      <td style="padding: 12px; text-align: center;">10 GB</td>\n      <td style="padding: 12px; text-align: center;">100 GB</td>\n      <td style="padding: 12px; text-align: center;">1 TB</td>\n      <td style="padding: 12px; color: #6c757d; font-size: 0.9em;">Cloud-based with automatic backup</td>\n    </tr>\n    <tr style="border-bottom: 1px solid #dee2e6;">\n      <td style="padding: 12px; font-weight: 500;">API Calls/Month</td>\n      <td style="padding: 12px; text-align: center;">1,000</td>\n      <td style="padding: 12px; text-align: center;">10,000</td>\n      <td style="padding: 12px; text-align: center;">Unlimited</td>\n      <td style="padding: 12px; color: #6c757d; font-size: 0.9em;">Rate limiting applies</td>\n    </tr>\n  </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\"># Mixed Markdown and HTML Approach\u003C/span>\n| Product Category | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 120px; text-align: center;"\u003C/span>>\u003C/span>\u003C/span>Q1 Sales\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 120px; text-align: center;"\u003C/span>>\u003C/span>\u003C/span>Q2 Sales\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 120px; text-align: center;"\u003C/span>>\u003C/span>\u003C/span>Growth %\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | Notes |\n|:-----------------|:--:|:--:|:--:|:------|\n| \u003Cspan class=\"hljs-strong\">**Electronics**\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #28a745; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$125,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #28a745; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$150,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #28a745; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>+20%\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | Strong mobile device sales |\n| \u003Cspan class=\"hljs-strong\">**Furniture**\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #dc3545; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$85,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #ffc107; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$82,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #dc3545; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>-3.5%\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | Seasonal decline expected |\n| \u003Cspan class=\"hljs-strong\">**Accessories**\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #17a2b8; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$45,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #28a745; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>$52,000\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color: #28a745; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>+15.6%\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span> | New product line launched |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"external-css-for-systematic-control\">External CSS for Systematic Control\u003C/h3>\n\u003Cp>Comprehensive stylesheet approach for consistent table formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* markdown-tables.css - Complete table formatting system */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Root table variables */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--table-border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-header-bg\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-row-hover\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#212529\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-border-width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-cell-padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Base table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-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\">border\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-width) solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-radius);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-font-size);\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Header styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-header-bg);\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\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-cell-padding);\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\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-primary);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-width) solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-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-comment\">/* Cell styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-cell-padding);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-primary);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-width) solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-width) solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-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\">border-right\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Row styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-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\">.markdown-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-built_in\">var\u003C/span>(--table-row-hover);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Column width classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.col-xs\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">8.33%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-sm\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">16.67%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-md\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">25%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-lg\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">33.33%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-xl\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">41.67%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-xxl\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Fixed width columns */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.col-60\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">60px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">60px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-80\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-100\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-120\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-150\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">150px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">150px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.col-200\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>; \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Alignment classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-left\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left; }\n\u003Cspan class=\"hljs-selector-class\">.text-center\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; }\n\u003Cspan class=\"hljs-selector-class\">.text-right\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right; }\n\u003Cspan class=\"hljs-selector-class\">.text-justify\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify; }\n\n\u003Cspan class=\"hljs-comment\">/* Vertical alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.align-top\u003C/span> { \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top; }\n\u003Cspan class=\"hljs-selector-class\">.align-middle\u003C/span> { \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: middle; }\n\u003Cspan class=\"hljs-selector-class\">.align-bottom\u003C/span> { \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: bottom; }\n\n\u003Cspan class=\"hljs-comment\">/* Content type specific styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.numeric\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-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.currency\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\">.percentage\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\">.status\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.date\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-comment\">/* Status indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#d4edda\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\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\">.status-inactive\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8d7da\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\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\">.status-pending\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table wrapper */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-responsive\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  -webkit-\u003Cspan class=\"hljs-attribute\">overflow\u003C/span>-scrolling: touch;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-radius);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-responsive\u003C/span> \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-column-control-techniques\">Advanced Column Control Techniques\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced column width control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-fixed\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-auto\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Column group styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> colgroup col\u003Cspan class=\"hljs-selector-class\">.col-narrow\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">10%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> colgroup col\u003Cspan class=\"hljs-selector-class\">.col-medium\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> colgroup col\u003Cspan class=\"hljs-selector-class\">.col-wide\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">30%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> colgroup col\u003Cspan class=\"hljs-selector-class\">.col-flexible\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content-aware column sizing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.col-icon\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\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}\n\n\u003Cspan class=\"hljs-selector-class\">.col-id\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: monospace;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.col-name\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">150px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.col-description\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.col-date\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.col-amount\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.col-actions\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-table-design\">Responsive Table Design\u003C/h2>\n\u003Ch3 id=\"mobile-first-approach\">Mobile-First Approach\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive table design system */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\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\">4px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Stack table on mobile */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: visible;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#eee\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\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\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Add labels for mobile view */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.table-stack\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\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-secondary);\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Hide certain columns on mobile */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.hide-mobile\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">769px\u003C/span>) \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\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\">.col-description\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">150px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.hide-tablet\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop optimizations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1025px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-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-comment\">/* Enhanced hover effects on desktop */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.markdown-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-built_in\">var\u003C/span>(--table-row-hover);\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">1px\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\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"horizontal-scrolling-tables\">Horizontal Scrolling Tables\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Responsive Table with Horizontal Scroll\u003C/span>\n\n\u003Cspan class=\"language-xml\">\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>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table table-fixed"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <colgroup>\n      <col class="col-name">\n      <col class="col-80">\n      <col class="col-80">\n      <col class="col-80">\n      <col class="col-80">\n      <col class="col-80">\n      <col class="col-100">\n      <col class="col-120">\n    </colgroup>\n    <thead>\n      <tr>\n        <th class="text-left">Product Name</th>\n        <th class="text-center">Jan</th>\n        <th class="text-center">Feb</th>\n        <th class="text-center">Mar</th>\n        <th class="text-center">Apr</th>\n        <th class="text-center">May</th>\n        <th class="text-right">Total</th>\n        <th class="text-center">Status</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td class="text-left">Wireless Headphones</td>\n        <td class="numeric">125</td>\n        <td class="numeric">142</td>\n        <td class="numeric">158</td>\n        <td class="numeric">167</td>\n        <td class="numeric">189</td>\n        <td class="currency">$78,100</td>\n        <td class="status status-active">Active</td>\n      </tr>\n      <tr>\n        <td class="text-left">Bluetooth Speaker</td>\n        <td class="numeric">89</td>\n        <td class="numeric">92</td>\n        <td class="numeric">76</td>\n        <td class="numeric">84</td>\n        <td class="numeric">91</td>\n        <td class="currency">$43,200</td>\n        <td class="status status-active">Active</td>\n      </tr>\n      <tr>\n        <td class="text-left">USB-C Hub</td>\n        <td class="numeric">45</td>\n        <td class="numeric">38</td>\n        <td class="numeric">52</td>\n        <td class="numeric">41</td>\n        <td class="numeric">48</td>\n        <td class="currency">$22,400</td>\n        <td class="status status-pending">Review</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-implementation\">Platform-Specific Implementation\u003C/h2>\n\u003Ch3 id=\"github-pages-and-jekyll-integration\">GitHub Pages and Jekyll Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/responsive-table.html -->\n<div class="table-container">\n  <div class="table-responsive">\n    <table class="markdown-table {{ include.class }}">\n      {% if include.headers %}\n        <thead>\n          <tr>\n            {% for header in include.headers %}\n              <th class="{{ header.class }}">{{ header.text }}</th>\n            {% endfor %}\n          </tr>\n        </thead>\n      {% endif %}\n      <tbody>\n        {% for row in include.rows %}\n          <tr>\n            {% for cell in row %}\n              <td class="{{ cell.class }}" {% if cell.label %}data-label="{{ cell.label }}"{% endif %}>\n                {{ cell.text }}\n              </td>\n            {% endfor %}\n          </tr>\n        {% endfor %}\n      </tbody>\n    </table>\n  </div>\n</div>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Content\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">---\ntable\u003Cspan class=\"hljs-emphasis\">_data:\n  headers:\n    - text: "Product"\n      class: "text-left col-name"\n    - text: "Price"\n      class: "text-right col-amount"\n    - text: "Stock"\n      class: "text-center col-80"\n  rows:\n    - - text: "Laptop"\n        class: "text-left"\n        label: "Product"\n      - text: "$999.99"\n        class: "currency"\n        label: "Price"\n      - text: "15"\n        class: "numeric"\n        label: "Stock"\n---\n\n{% include responsive-table.html headers=page.table_\u003C/span>data.headers rows=page.table\u003Cspan class=\"hljs-emphasis\">_data.rows class="table-striped" %}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-for-tables\">Hugo Shortcode for Tables\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/data-table.html -->\n{{ $headers := .Get "headers" | split "," }}\n{{ $widths := .Get "widths" | split "," }}\n{{ $align := .Get "align" | split "," }}\n{{ $class := .Get "class" | default "markdown-table" }}\n\n<div class="table-responsive">\n  <table class="{{ $class }}">\n    {{ if $widths }}\n      <colgroup>\n        {{ range $widths }}\n          <col style="width: {{ . }}">\n        {{ end }}\n      </colgroup>\n    {{ end }}\n    \n    {{ if $headers }}\n      <thead>\n        <tr>\n          {{ range $index, $header := $headers }}\n            {{ $alignment := index $align $index | default "left" }}\n            <th class="text-{{ $alignment }}">{{ $header }}</th>\n          {{ end }}\n        </tr>\n      </thead>\n    {{ end }}\n    \n    <tbody>\n      {{ .Inner | markdownify }}\n    </tbody>\n  </table>\n</div>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/comparison-table.html -->\n{{ $features := .Site.Data.comparison.features }}\n{{ $plans := .Site.Data.comparison.plans }}\n\n<div class="comparison-table-wrapper">\n  <table class="comparison-table">\n    <thead>\n      <tr>\n        <th class="feature-column">Features</th>\n        {{ range $plans }}\n          <th class="plan-column text-center">\n            <div class="plan-name">{{ .name }}</div>\n            <div class="plan-price">{{ .price }}</div>\n          </th>\n        {{ end }}\n      </tr>\n    </thead>\n    <tbody>\n      {{ range $features }}\n        <tr>\n          <td class="feature-name">{{ .name }}</td>\n          {{ range $plans }}\n            {{ $value := index .features $.name }}\n            <td class="feature-value text-center">\n              {{ if eq $value true }}\n                <span class="checkmark">✓</span>\n              {{ else if eq $value false }}\n                <span class="cross">✗</span>\n              {{ else }}\n                {{ $value }}\n              {{ end }}\n            </td>\n          {{ end }}\n        </tr>\n      {{ end }}\n    </tbody>\n  </table>\n</div>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Hugo Content Usage\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">{{< data-table \n\u003Cspan class=\"hljs-code\">    headers="Product,Q1,Q2,Q3,Q4,Total" \n    widths="30%,14%,14%,14%,14%,14%" \n    align="left,right,right,right,right,right"\n    class="quarterly-report" >}}\n| Electronics | $125k | $142k | $158k | $167k | $592k |\n| Furniture | $85k | $92k | $76k | $84k | $337k |\n| Accessories | $45k | $38k | $52k | $41k | $176k |\n{{< /data-table >}}\n\u003C/span>\n{{< comparison-table >}}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-table-enhancement\">Obsidian Table Enhancement\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* obsidian-tables.css - Enhanced table styling for Obsidian */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Override default Obsidian table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--background-secondary);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--background-modifier-border);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\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>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--background-modifier-border);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Source mode enhancements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-table-widget\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-monospace);\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Custom CSS classes for Obsidian tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-fixed\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\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}\n\n\u003Cspan class=\"hljs-comment\">/* Column width utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.w-10\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">10%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-15\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">15%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-20\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-25\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">25%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-30\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">30%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-40\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.w-50\u003C/span> { \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Alignment utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-left\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left; }\n\u003Cspan class=\"hljs-selector-class\">.text-center\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; }\n\u003Cspan class=\"hljs-selector-class\">.text-right\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right; }\n\n\u003Cspan class=\"hljs-comment\">/* Content type styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.numeric\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\">.monospace\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-monospace);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status badges */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.badge\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.badge-success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-green);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.badge-warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-orange);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.badge-error\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-red);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-table-formatting-techniques\">Advanced Table Formatting Techniques\u003C/h2>\n\u003Ch3 id=\"data-type-specific-formatting\">Data Type Specific Formatting\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Financial Report Table with Advanced Formatting\u003C/span>\n\n\u003Cspan class=\"language-xml\">\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>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table financial-report"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <colgroup>\n      <col style="width: 25%">\n      <col style="width: 15%">\n      <col style="width: 15%">\n      <col style="width: 15%">\n      <col style="width: 15%">\n      <col style="width: 15%">\n    </colgroup>\n    <thead>\n      <tr>\n        <th class="text-left">Account</th>\n        <th class="text-right">Q1 2025</th>\n        <th class="text-right">Q2 2025</th>\n        <th class="text-right">Q3 2025</th>\n        <th class="text-right">Q4 2025</th>\n        <th class="text-right">Total</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="revenue-row">\n        <td class="account-name"><strong>Revenue</strong></td>\n        <td class="currency positive">$247,500</td>\n        <td class="currency positive">$289,750</td>\n        <td class="currency positive">$312,400</td>\n        <td class="currency positive">$356,800</td>\n        <td class="currency total positive">$1,206,450</td>\n      </tr>\n      <tr class="expense-row">\n        <td class="account-name"><strong>Operating Expenses</strong></td>\n        <td class="currency negative">($142,300)</td>\n        <td class="currency negative">($158,900)</td>\n        <td class="currency negative">($167,200)</td>\n        <td class="currency negative">($189,500)</td>\n        <td class="currency total negative">($657,900)</td>\n      </tr>\n      <tr class="expense-row">\n        <td class="account-name">├─ Payroll</td>\n        <td class="currency">$85,000</td>\n        <td class="currency">$88,000</td>\n        <td class="currency">$92,000</td>\n        <td class="currency">$95,000</td>\n        <td class="currency">$360,000</td>\n      </tr>\n      <tr class="expense-row">\n        <td class="account-name">├─ Marketing</td>\n        <td class="currency">$32,500</td>\n        <td class="currency">$38,200</td>\n        <td class="currency">$41,800</td>\n        <td class="currency">$48,600</td>\n        <td class="currency">$161,100</td>\n      </tr>\n      <tr class="expense-row">\n        <td class="account-name">└─ Operations</td>\n        <td class="currency">$24,800</td>\n        <td class="currency">$32,700</td>\n        <td class="currency">$33,400</td>\n        <td class="currency">$45,900</td>\n        <td class="currency">$136,800</td>\n      </tr>\n      <tr class="profit-row">\n        <td class="account-name"><strong>Net Income</strong></td>\n        <td class="currency profit">$105,200</td>\n        <td class="currency profit">$130,850</td>\n        <td class="currency profit">$145,200</td>\n        <td class="currency profit">$167,300</td>\n        <td class="currency total profit">$548,550</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.financial-report {\n  font-variant-numeric: tabular-nums;\n}\n\n.financial-report .currency {\n  text-align: right;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 500;\n}\n\n.financial-report .positive {\n  color: #28a745;\n}\n\n.financial-report .negative {\n  color: #dc3545;\n}\n\n.financial-report .profit {\n  color: #007bff;\n  font-weight: 600;\n}\n\n.financial-report .total {\n  font-weight: 700;\n  border-top: 2px solid #dee2e6;\n  background-color: #f8f9fa;\n}\n\n.financial-report .account-name {\n  font-family: system-ui, -apple-system, sans-serif;\n}\n\n.financial-report .revenue-row {\n  background-color: #d4edda;\n}\n\n.financial-report .expense-row:nth-child(odd) {\n  background-color: #f8f9fa;\n}\n\n.financial-report .profit-row {\n  background-color: #cce5ff;\n  border-top: 3px solid #007bff;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-table-elements\">Interactive Table Elements\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Interactive sortable table -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-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\">"markdown-table sortable-table"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"product-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\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>\n          Product Name \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \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\">"sortable numeric"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"price"\u003C/span>>\u003C/span>\n          Price \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \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\">"sortable numeric"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"stock"\u003C/span>>\u003C/span>\n          Stock \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \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\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"category"\u003C/span>>\u003C/span>\n          Category \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \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\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>\n          Status \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \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\">data-price\u003C/span>=\u003Cspan class=\"hljs-string\">"99.99"\u003C/span> \u003Cspan class=\"hljs-attr\">data-stock\u003C/span>=\u003Cspan class=\"hljs-string\">"45"\u003C/span> \u003Cspan class=\"hljs-attr\">data-category\u003C/span>=\u003Cspan class=\"hljs-string\">"Electronics"\u003C/span> \u003Cspan class=\"hljs-attr\">data-status\u003C/span>=\u003Cspan class=\"hljs-string\">"In Stock"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"currency"\u003C/span>>\u003C/span>$99.99\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\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>>\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status status-active"\u003C/span>>\u003C/span>In Stock\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\">data-price\u003C/span>=\u003Cspan class=\"hljs-string\">"299.00"\u003C/span> \u003Cspan class=\"hljs-attr\">data-stock\u003C/span>=\u003Cspan class=\"hljs-string\">"12"\u003C/span> \u003Cspan class=\"hljs-attr\">data-category\u003C/span>=\u003Cspan class=\"hljs-string\">"Furniture"\u003C/span> \u003Cspan class=\"hljs-attr\">data-status\u003C/span>=\u003Cspan class=\"hljs-string\">"Limited"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Office Chair\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"currency"\u003C/span>>\u003C/span>$299.00\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\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\">td\u003C/span>>\u003C/span>Furniture\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status status-pending"\u003C/span>>\u003C/span>Limited\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\">data-price\u003C/span>=\u003Cspan class=\"hljs-string\">"49.95"\u003C/span> \u003Cspan class=\"hljs-attr\">data-stock\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \u003Cspan class=\"hljs-attr\">data-category\u003C/span>=\u003Cspan class=\"hljs-string\">"Accessories"\u003C/span> \u003Cspan class=\"hljs-attr\">data-status\u003C/span>=\u003Cspan class=\"hljs-string\">"Out of Stock"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Laptop Stand\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"currency"\u003C/span>>\u003C/span>$49.95\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>>\u003C/span>0\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>Accessories\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status status-inactive"\u003C/span>>\u003C/span>Out of Stock\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-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Simple table sorting functionality\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-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'product-table'\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.sortable'\u003C/span>);\n  \n  headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n    header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> column = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-sort'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\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>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n      \n      \u003Cspan class=\"hljs-comment\">// Remove existing sort indicators\u003C/span>\n      headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'sort-asc'\u003C/span>, \u003Cspan class=\"hljs-string\">'sort-desc'\u003C/span>));\n      \n      \u003Cspan class=\"hljs-comment\">// Determine sort direction\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> isAsc = !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'sort-asc'\u003C/span>);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(isAsc ? \u003Cspan class=\"hljs-string\">'sort-asc'\u003C/span> : \u003Cspan class=\"hljs-string\">'sort-desc'\u003C/span>);\n      \n      \u003Cspan class=\"hljs-comment\">// Sort rows\u003C/span>\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\">let\u003C/span> aVal, bVal;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column === \u003Cspan class=\"hljs-string\">'name'\u003C/span>) {\n          aVal = a.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n          bVal = b.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column === \u003Cspan class=\"hljs-string\">'price'\u003C/span>) {\n          aVal = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(a.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-price'\u003C/span>));\n          bVal = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(b.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-price'\u003C/span>));\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column === \u003Cspan class=\"hljs-string\">'stock'\u003C/span>) {\n          aVal = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(a.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-stock'\u003C/span>));\n          bVal = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(b.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-stock'\u003C/span>));\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          aVal = a.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-'\u003C/span> + column);\n          bVal = b.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-'\u003C/span> + column);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (aVal < bVal) \u003Cspan class=\"hljs-keyword\">return\u003C/span> isAsc ? -\u003Cspan class=\"hljs-number\">1\u003C/span> : \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (aVal > bVal) \u003Cspan class=\"hljs-keyword\">return\u003C/span> isAsc ? \u003Cspan class=\"hljs-number\">1\u003C/span> : -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n      });\n      \n      \u003Cspan class=\"hljs-comment\">// Re-append sorted rows\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});\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\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\">.sortable\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  user-select: none;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable\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-selector-class\">.sort-indicator\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sort-asc\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'▲'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sort-desc\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'▼'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization\">Performance Optimization\u003C/h2>\n\u003Ch3 id=\"large-table-handling\">Large Table Handling\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Performance optimizations for large tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">60vh\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Sticky header for scrollable tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\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\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-header-bg);\n  \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\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\">2px\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-comment\">/* Sticky first column */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sticky-col\u003C/span> {\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\">2px\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\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sticky-col\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">15\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-header-bg);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Virtual scrolling hint */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Fixed row height for better scrolling */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Zebra striping for better readability */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(even) {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(odd) {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading state */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Loading...'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translate\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>, -\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \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.9\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-secondary);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"memory-efficient-table-rendering\">Memory-Efficient Table Rendering\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Virtual table rendering for large datasets\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTable\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, data, options = {}\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = container;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = data;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">rowHeight\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">visibleRows\u003C/span>: \u003Cspan class=\"hljs-number\">20\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">columns\u003C/span>: [],\n      ...options\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\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_\">createTable\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createScrollHandler\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span> = \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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-wrapper'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.visibleRows * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\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-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-table virtual-table'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Create header\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> thead = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">columns\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\">const\u003C/span> th = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n      th.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = column.\u003Cspan class=\"hljs-property\">title\u003C/span>;\n      th.\u003Cspan class=\"hljs-property\">className\u003C/span> = column.\u003Cspan class=\"hljs-property\">className\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column.\u003Cspan class=\"hljs-property\">width\u003C/span>) {\n        th.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span> = column.\u003Cspan class=\"hljs-property\">width\u003C/span>;\n      }\n      headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(th);\n    });\n    \n    thead.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerRow);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(thead);\n    \n    \u003Cspan class=\"hljs-comment\">// Create tbody\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Create spacer for virtual scrolling\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\u003C/span> = \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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.data.length * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\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\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createScrollHandler\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>();\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">render\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>);\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span> + \u003Cspan class=\"hljs-number\">5\u003C/span>,\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n    );\n    \n    \u003Cspan class=\"hljs-comment\">// Clear existing rows\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Position table to create virtual scrolling effect\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\">${startIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px)`\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Render visible rows\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startIndex; i < endIndex; i++) {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRow\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>[i], i);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row);\n      }\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createRow\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tr = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n    tr.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">columns\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\">const\u003C/span> td = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n      td.\u003Cspan class=\"hljs-property\">className\u003C/span> = column.\u003Cspan class=\"hljs-property\">className\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      td.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = rowData[column.\u003Cspan class=\"hljs-property\">field\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      tr.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(td);\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> tr;\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-keyword\">function\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_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'large-table-container'\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>({\u003Cspan class=\"hljs-attr\">length\u003C/span>: \u003Cspan class=\"hljs-number\">10000\u003C/span>}, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, i\u003C/span>) =>\u003C/span> ({\n    \u003Cspan class=\"hljs-attr\">id\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">`Product \u003Cspan class=\"hljs-subst\">${i + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">price\u003C/span>: (\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">random\u003C/span>() * \u003Cspan class=\"hljs-number\">1000\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>),\n    \u003Cspan class=\"hljs-attr\">category\u003C/span>: [\u003Cspan class=\"hljs-string\">'Electronics'\u003C/span>, \u003Cspan class=\"hljs-string\">'Furniture'\u003C/span>, \u003Cspan class=\"hljs-string\">'Accessories'\u003C/span>][i % \u003Cspan class=\"hljs-number\">3\u003C/span>],\n    \u003Cspan class=\"hljs-attr\">stock\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">random\u003C/span>() * \u003Cspan class=\"hljs-number\">100\u003C/span>)\n  }));\n  \n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = [\n    { \u003Cspan class=\"hljs-attr\">field\u003C/span>: \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'ID'\u003C/span>, \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-string\">'60px'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'text-center'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">field\u003C/span>: \u003Cspan class=\"hljs-string\">'name'\u003C/span>, \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Product Name'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'text-left'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">field\u003C/span>: \u003Cspan class=\"hljs-string\">'price'\u003C/span>, \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Price'\u003C/span>, \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-string\">'100px'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'currency'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">field\u003C/span>: \u003Cspan class=\"hljs-string\">'category'\u003C/span>, \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Category'\u003C/span>, \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-string\">'120px'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'text-center'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">field\u003C/span>: \u003Cspan class=\"hljs-string\">'stock'\u003C/span>, \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Stock'\u003C/span>, \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-string\">'80px'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'numeric'\u003C/span> }\n  ];\n  \n  \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTable\u003C/span>(container, data, { columns });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-workflows\">Integration with Modern Workflows\u003C/h2>\n\u003Cp>Table column width and alignment control integrates seamlessly with comprehensive Markdown documentation systems. When combined with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting capabilities\u003C/a>, properly formatted tables present code examples and technical specifications in organized, scannable layouts that enhance developer experience.\u003C/p>\n\u003Cp>For comprehensive project documentation, table formatting works effectively with \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> to create project management dashboards and feature matrices that communicate complex information through structured visual organization.\u003C/p>\n\u003Cp>When creating technical specifications that require both tabular data and rich typography, table controls complement \u003Ca href=\"/blog/markdown-line-height-spacing-complete-guide\">line height and spacing techniques\u003C/a> to ensure consistent visual rhythm throughout documentation while maintaining optimal readability in data-dense content.\u003C/p>\n\u003Ch2 id=\"accessibility-considerations\">Accessibility Considerations\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible table implementation -->\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\">"markdown-table"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Product inventory summary"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n    Product inventory showing name, price, stock levels, and availability status for 4 items\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\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\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"product-name"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"price"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-button"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"price-help"\u003C/span>>\u003C/span>\n          Price\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-icon"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      \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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"stock"\u003C/span>>\u003C/span>Current 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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>Availability 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> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"product-name"\u003C/span>>\u003C/span>Wireless Headphones\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"price"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"currency-note"\u003C/span>>\u003C/span>$99.99\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"stock"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"45 units in stock"\u003C/span>>\u003C/span>45\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\">headers\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-badge status-success"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Available for purchase"\u003C/span>>\u003C/span>\n          In Stock\n        \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\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"product-name"\u003C/span>>\u003C/span>Office Chair\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"price"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"currency-note"\u003C/span>>\u003C/span>$299.00\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"stock"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"12 units remaining"\u003C/span>>\u003C/span>12\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\">headers\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-badge status-warning"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Limited quantity available"\u003C/span>>\u003C/span>\n          Limited Stock\n        \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\">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\"><!-- Hidden helper text -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"currency-note"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  All prices shown in US dollars\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"price-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  Click to sort products by price, ascending or descending\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"color-contrast-and-visual-clarity\">Color Contrast and Visual Clarity\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* High contrast table styling */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-width\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-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\">#ffff00\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.status-success\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#006600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.status-warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#cc6600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.status-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#cc0000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-hover\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\">transform\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader only content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\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\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"column-width-problems\">Column Width Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Columns not maintaining specified widths\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Force table layout algorithm */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-fixed\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\">.table-fixed\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-fixed\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\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-comment\">/* Alternative: Flexible column approach */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-flex\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-flex\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-row\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\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\">.table-flex\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-right\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\">.table-flex\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-narrow\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-flex\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-wide\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-responsiveness-issues\">Mobile Responsiveness Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables breaking layout on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Progressive table enhancement */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">767px\u003C/span>) {\n  \u003Cspan class=\"hljs-comment\">/* Option 1: Horizontal scroll */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.table-scroll\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    -webkit-\u003Cspan class=\"hljs-attribute\">overflow\u003C/span>-scrolling: touch;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-scroll\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Option 2: Stacked layout */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\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  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-stack\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\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Option 3: Card layout */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> \u003Cspan class=\"hljs-selector-class\">.card\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> \u003Cspan class=\"hljs-selector-class\">.card-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> \u003Cspan class=\"hljs-selector-class\">.card-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-browser-compatibility\">Cross-Browser Compatibility\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables rendering differently across browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Normalize table rendering across browsers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.cross-browser-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: separate;\n  \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cross-browser-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.cross-browser-table\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 \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.cross-browser-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\">.cross-browser-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\">border-left\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\">.cross-browser-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix for IE/Edge sticky positioning */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> (\u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky) {\n  \u003Cspan class=\"hljs-selector-class\">.sticky-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sticky-header\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Safari-specific fixes */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-appearance\u003C/span>: none) {\n  \u003Cspan class=\"hljs-selector-class\">.safari-table-fix\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Table column width and alignment control in Markdown transforms basic data presentation into professional, accessible layouts that enhance information comprehension and visual organization. By mastering CSS integration, responsive design techniques, and platform-specific implementations, content creators can produce tables that maintain functionality and readability across all devices and contexts while meeting modern accessibility standards.\u003C/p>\n\u003Cp>The key to successful table implementation lies in understanding the relationship between content structure, visual design, and user experience, then applying these principles consistently throughout your documentation workflow. Whether you're presenting financial data, product comparisons, or technical specifications, the techniques covered in this guide provide the foundation for professional table formatting that serves both aesthetic and functional requirements.\u003C/p>\n\u003Cp>Remember to test your table implementations across different browsers and screen sizes, validate accessibility compliance with assistive technologies, and optimize for performance when handling large datasets. With proper column width and alignment control, your Markdown tables become powerful tools for data communication that engage users while maintaining the professional standards expected in modern technical documentation.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46],{"id":16,"text":17,"level":18},"why-control-table-column-width-and-alignment","Why Control Table Column Width and Alignment?",2,{"id":20,"text":21,"level":18},"understanding-markdown-table-basics","Understanding Markdown Table Basics",{"id":23,"text":24,"level":18},"css-integration-for-advanced-control","CSS Integration for Advanced Control",{"id":26,"text":27,"level":18},"responsive-table-design","Responsive Table Design",{"id":29,"text":30,"level":18},"platform-specific-implementation","Platform-Specific Implementation",{"id":32,"text":33,"level":18},"advanced-table-formatting-techniques","Advanced Table Formatting Techniques",{"id":35,"text":36,"level":18},"performance-optimization","Performance Optimization",{"id":38,"text":39,"level":18},"integration-with-modern-workflows","Integration with Modern Workflows",{"id":41,"text":42,"level":18},"accessibility-considerations","Accessibility Considerations",{"id":44,"text":45,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":47,"text":48,"level":18},"conclusion","Conclusion",[],[51,59,67],{"slug":52,"title":53,"description":54,"excerpt":55,"date":56,"category":9,"author":10,"keywords":57,"readingMinutes":58},"markdown-table-column-alignment-and-formatting-complete-guide","Markdown Table Column Alignment and Advanced Formatting: Complete Guide to Professional Data Presentation and Layout Control","Master advanced Markdown table column alignment, formatting techniques, and professional data presentation strategies. Learn alignment methods, width control, and visual formatting for comprehensive table design.","Advanced Markdown table column alignment and formatting techniques enable sophisticated data presentation that enhances readability, maintains visual consistency, and provides professional-quality…","2025-12-15","markdown table alignment, table column formatting, markdown table layout, table data alignment, markdown table width, table formatting guide, professional markdown tables, table presentation",18,{"slug":60,"title":61,"description":62,"excerpt":63,"date":64,"category":9,"author":10,"keywords":65,"readingMinutes":66},"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","markdown table column width, cell padding markdown, table formatting, responsive tables, markdown table styling, data presentation, table design, column sizing",35,{"slug":68,"title":69,"description":70,"excerpt":71,"date":72,"category":9,"author":10,"keywords":73,"readingMinutes":74},"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,1792184941837]