Markdown Table Column Width and Cell Padding: Complete Guide for Professional Data Presentation

Advanced Markdown table column width and cell padding techniques enable professional data presentation that optimizes readability, visual hierarchy, and responsive behavior across different viewing environments. By mastering column sizing strategies, padding control, and adaptive table design, content creators can build sophisticated data presentations that maintain clarity and accessibility while accommodating diverse screen sizes and content requirements.

Why Master Table Column Width and Padding?

Professional table formatting provides essential benefits for data presentation:

• Visual Hierarchy: Control column widths to emphasize important data and create clear information structure
• Readability Optimization: Proper padding and spacing improve content scanability and reduce cognitive load
• Responsive Design: Adaptive column sizing ensures tables remain usable across desktop, tablet, and mobile devices
• Professional Appearance: Consistent formatting creates polished, publication-ready data presentations
• Content Flexibility: Dynamic width management accommodates varying data lengths and types

Foundation Table Layout Concepts

Understanding Table Structure and Sizing

Basic principles of Markdown table layout and width control:

# Table Structure and Width Fundamentals

## Basic Table with Natural Width

| Product | Price | Stock | Description |
|---------|-------|-------|-------------|
| Laptop | $1,299 | 15 | High-performance business laptop |
| Mouse | $29 | 150 | Wireless optical mouse |
| Keyboard | $89 | 75 | Mechanical keyboard with RGB |

## Column Alignment and Visual Impact

| Left Aligned | Center Aligned | Right Aligned |
|:-------------|:--------------:|--------------:|
| Short | Medium Length | Very Long Content Here |
| Data | Content | Information |
| Item | Element | Component |

## Width Control Through Content Length

| ID | Product Name | Extended Description and Features | Price |
|----|--------------|-----------------------------------|-------|
| 1 | Laptop | Advanced business laptop with high-resolution display, fast processor, and extended battery life | $1,299 |
| 2 | Mouse | Ergonomic wireless mouse with precision tracking | $29 |
| 3 | Keyboard | Premium mechanical keyboard with customizable RGB lighting and programmable keys | $89 |

HTML Enhancement for Precise Control

Integrating HTML attributes for advanced table formatting:

<!-- Enhanced Markdown Table with HTML Styling -->

<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #f8f9fa;">
<th style="width: 10%; padding: 12px; text-align: left; border: 1px solid #dee2e6;">ID</th>
<th style="width: 25%; padding: 12px; text-align: left; border: 1px solid #dee2e6;">Product</th>
<th style="width: 45%; padding: 12px; text-align: left; border: 1px solid #dee2e6;">Description</th>
<th style="width: 20%; padding: 12px; text-align: right; border: 1px solid #dee2e6;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top;">001</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;">MacBook Pro</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;">
Professional laptop with M2 chip, 16GB RAM, 512GB SSD, and Retina display. Ideal for development, design, and content creation workflows.
</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;">$1,999</td>
</tr>
<tr style="background-color: #f8f9fa;">
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top;">002</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;">Wireless Mouse</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;">
Ergonomic wireless mouse with precision optical sensor, programmable buttons, and 24-month battery life.
</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;">$49</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top;">003</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; font-weight: bold;">Mechanical Keyboard</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; line-height: 1.4;">
Full-size mechanical keyboard with Cherry MX switches, RGB backlighting, and programmable macros. Built for professional and gaming use.
</td>
<td style="padding: 10px; border: 1px solid #dee2e6; vertical-align: top; text-align: right; font-weight: bold; color: #28a745;">$149</td>
</tr>
</tbody>
</table>

<!-- Responsive Table with Adaptive Width -->

<div style="overflow-x: auto; margin: 20px 0;">
<table style="min-width: 600px; width: 100%; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">
<thead>
<tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<th style="width: 60px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;">Rank</th>
<th style="width: 200px; padding: 15px; text-align: left; font-size: 14px; font-weight: 600;">Technology</th>
<th style="width: auto; padding: 15px; text-align: left; font-size: 14px; font-weight: 600;">Description & Use Cases</th>
<th style="width: 100px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;">Adoption</th>
<th style="width: 120px; padding: 15px 10px; text-align: center; font-size: 14px; font-weight: 600;">Growth Rate</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e9ecef;">
<td style="padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;">1</td>
<td style="padding: 12px 15px; font-weight: 600; color: #343a40;">React</td>
<td style="padding: 12px 15px; line-height: 1.5; color: #6c757d;">
Component-based library for building user interfaces. Widely used for single-page applications, mobile apps with React Native, and server-side rendering.
</td>
<td style="padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;">85%</td>
<td style="padding: 12px 10px; text-align: center; color: #17a2b8; font-weight: 600;">+12%</td>
</tr>
<tr style="background-color: #f8f9fa; border-bottom: 1px solid #e9ecef;">
<td style="padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;">2</td>
<td style="padding: 12px 15px; font-weight: 600; color: #343a40;">Vue.js</td>
<td style="padding: 12px 15px; line-height: 1.5; color: #6c757d;">
Progressive framework for building user interfaces. Known for gentle learning curve and excellent documentation. Great for both small and large applications.
</td>
<td style="padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;">72%</td>
<td style="padding: 12px 10px; text-align: center; color: #17a2b8; font-weight: 600;">+18%</td>
</tr>
<tr style="border-bottom: 1px solid #e9ecef;">
<td style="padding: 12px 10px; text-align: center; font-weight: bold; color: #495057;">3</td>
<td style="padding: 12px 15px; font-weight: 600; color: #343a40;">Angular</td>
<td style="padding: 12px 15px; line-height: 1.5; color: #6c757d;">
Full-featured framework for building scalable web applications. Provides comprehensive tooling, dependency injection, and enterprise-grade architecture patterns.
</td>
<td style="padding: 12px 10px; text-align: center; color: #28a745; font-weight: 600;">68%</td>
<td style="padding: 12px 10px; text-align: center; color: #ffc107; font-weight: 600;">+5%</td>
</tr>
</tbody>
</table>
</div>

CSS-in-Markdown Integration

Advanced styling approaches using CSS within Markdown documents:

<!-- CSS-Enhanced Table Formatting -->

<style>
.professional-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.professional-table thead {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
}

.professional-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.professional-table th.col-id { width: 8%; text-align: center; }
.professional-table th.col-name { width: 22%; }
.professional-table th.col-description { width: 45%; }
.professional-table th.col-status { width: 15%; text-align: center; }
.professional-table th.col-price { width: 10%; text-align: right; }

.professional-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #ecf0f1;
    vertical-align: top;
    line-height: 1.6;
}

.professional-table tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.professional-table tbody tr:last-child td {
    border-bottom: none;
}

.status-active {
    display: inline-block;
    padding: 4px 12px;
    background-color: #27ae60;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pending {
    display: inline-block;
    padding: 4px 12px;
    background-color: #f39c12;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-inactive {
    display: inline-block;
    padding: 4px 12px;
    background-color: #e74c3c;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.price-cell {
    font-weight: bold;
    color: #27ae60;
    font-size: 16px;
}

@media (max-width: 768px) {
    .professional-table {
        font-size: 14px;
    }
    
    .professional-table th,
    .professional-table td {
        padding: 10px 12px;
    }
    
    .professional-table th.col-description,
    .professional-table td.col-description {
        display: none;
    }
}

@media (max-width: 480px) {
    .professional-table,
    .professional-table thead,
    .professional-table tbody,
    .professional-table th,
    .professional-table td,
    .professional-table tr {
        display: block;
    }
    
    .professional-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .professional-table tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 4px;
    }
    
    .professional-table td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: left;
    }
    
    .professional-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 45%;
        text-align: right;
        font-weight: bold;
        color: #333;
    }
}
</style>

<table class="professional-table">
<thead>
<tr>
<th class="col-id">ID</th>
<th class="col-name">Service Name</th>
<th class="col-description">Features & Description</th>
<th class="col-status">Status</th>
<th class="col-price">Monthly</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="ID" style="text-align: center; font-weight: bold;">001</td>
<td data-label="Service Name" style="font-weight: 600; color: #2c3e50;">Premium Hosting</td>
<td data-label="Features & Description" class="col-description">
High-performance SSD hosting with 99.9% uptime guarantee, automatic backups, SSL certificates, and 24/7 technical support. Perfect for business websites and e-commerce.
</td>
<td data-label="Status" style="text-align: center;">
<span class="status-active">Active</span>
</td>
<td data-label="Monthly" class="price-cell" style="text-align: right;">$29.99</td>
</tr>
<tr>
<td data-label="ID" style="text-align: center; font-weight: bold;">002</td>
<td data-label="Service Name" style="font-weight: 600; color: #2c3e50;">Cloud Storage</td>
<td data-label="Features & Description" class="col-description">
Secure cloud storage with automatic synchronization, file versioning, collaboration tools, and advanced sharing controls. Ideal for teams and content creators.
</td>
<td data-label="Status" style="text-align: center;">
<span class="status-pending">Pending</span>
</td>
<td data-label="Monthly" class="price-cell" style="text-align: right;">$19.99</td>
</tr>
<tr>
<td data-label="ID" style="text-align: center; font-weight: bold;">003</td>
<td data-label="Service Name" style="font-weight: 600; color: #2c3e50;">Email Marketing</td>
<td data-label="Features & Description" class="col-description">
Professional email marketing platform with automation workflows, analytics, A/B testing, and responsive templates. Includes CRM integration and detailed reporting.
</td>
<td data-label="Status" style="text-align: center;">
<span class="status-inactive">Inactive</span>
</td>
<td data-label="Monthly" class="price-cell" style="text-align: right;">$39.99</td>
</tr>
</tbody>
</table>

Advanced Column Width Strategies

Percentage-Based Width Control

Creating flexible, responsive column layouts:

<!-- Percentage-Based Column Width System -->

<table style="width: 100%; border-collapse: collapse; margin: 20px 0; font-family: system-ui, -apple-system, sans-serif;">
<colgroup>
<col style="width: 5%;">   <!-- ID Column -->
<col style="width: 25%;">  <!-- Name Column -->
<col style="width: 40%;">  <!-- Description Column -->
<col style="width: 15%;">  <!-- Category Column -->
<col style="width: 15%;">  <!-- Price Column -->
</colgroup>
<thead>
<tr style="background-color: #343a40; color: white;">
<th style="padding: 12px 8px; text-align: center; font-size: 12px;">#</th>
<th style="padding: 12px 15px; text-align: left; font-size: 14px;">Product Name</th>
<th style="padding: 12px 15px; text-align: left; font-size: 14px;">Detailed Description</th>
<th style="padding: 12px 10px; text-align: center; font-size: 14px;">Category</th>
<th style="padding: 12px 10px; text-align: right; font-size: 14px;">Price</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #dee2e6;">
<td style="padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;">1</td>
<td style="padding: 10px 15px; font-weight: 600; color: #495057;">Wireless Headphones</td>
<td style="padding: 10px 15px; line-height: 1.4; color: #6c757d;">
Premium over-ear headphones with active noise cancellation, 30-hour battery life, and high-resolution audio support. Features quick-charge capability and premium materials.
</td>
<td style="padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;">Electronics</td>
<td style="padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;">$299</td>
</tr>
<tr style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">
<td style="padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;">2</td>
<td style="padding: 10px 15px; font-weight: 600; color: #495057;">Smart Watch Series X</td>
<td style="padding: 10px 15px; line-height: 1.4; color: #6c757d;">
Advanced fitness tracking, heart rate monitoring, GPS, waterproof design, and smartphone integration. Includes multiple sport modes and health analytics dashboard.
</td>
<td style="padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;">Wearables</td>
<td style="padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;">$399</td>
</tr>
<tr style="border-bottom: 1px solid #dee2e6;">
<td style="padding: 10px 8px; text-align: center; font-weight: bold; color: #6c757d;">3</td>
<td style="padding: 10px 15px; font-weight: 600; color: #495057;">Portable SSD Drive</td>
<td style="padding: 10px 15px; line-height: 1.4; color: #6c757d;">
Ultra-fast external storage with USB-C connectivity, hardware encryption, shock-resistant design, and cross-platform compatibility. Perfect for professionals and creatives.
</td>
<td style="padding: 10px; text-align: center; background-color: #e9ecef; border-radius: 4px; font-size: 12px; font-weight: 600;">Storage</td>
<td style="padding: 10px; text-align: right; font-weight: bold; color: #28a745; font-size: 16px;">$189</td>
</tr>
</tbody>
</table>

<!-- Alternative Flexible Width Approach -->

<div style="overflow-x: auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<table style="width: 100%; min-width: 700px; border-collapse: collapse; background: white;">
<thead>
<tr style="background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); color: white;">
<th style="width: 80px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;">RANK</th>
<th style="width: auto; min-width: 200px; padding: 16px 20px; font-size: 13px; font-weight: 700;">FRAMEWORK/LIBRARY</th>
<th style="width: 35%; padding: 16px 20px; font-size: 13px; font-weight: 700;">KEY FEATURES & BENEFITS</th>
<th style="width: 100px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;">STARS</th>
<th style="width: 120px; padding: 16px 12px; font-size: 13px; font-weight: 700; text-align: center;">WEEKLY NPM</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 2px solid #f1f3f4;">
<td style="padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;">1</td>
<td style="padding: 18px 20px;">
<div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;">React</div>
<div style="font-size: 12px; color: #666; font-style: italic;">by Meta (Facebook)</div>
</td>
<td style="padding: 18px 20px; line-height: 1.5; color: #555;">
Component-based architecture, virtual DOM, extensive ecosystem, strong community support, excellent development tools, and flexible state management options.
</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;">209k</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;">18.5M</td>
</tr>
<tr style="background-color: #fafbfc; border-bottom: 2px solid #f1f3f4;">
<td style="padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;">2</td>
<td style="padding: 18px 20px;">
<div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;">Vue.js</div>
<div style="font-size: 12px; color: #666; font-style: italic;">by Evan You</div>
</td>
<td style="padding: 18px 20px; line-height: 1.5; color: #555;">
Progressive framework, gentle learning curve, excellent documentation, two-way data binding, template-based syntax, and great performance optimization.
</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;">203k</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;">4.2M</td>
</tr>
<tr style="border-bottom: 2px solid #f1f3f4;">
<td style="padding: 18px 12px; text-align: center; font-size: 20px; font-weight: bold; color: #ff6b35;">3</td>
<td style="padding: 18px 20px;">
<div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 4px;">Angular</div>
<div style="font-size: 12px; color: #666; font-style: italic;">by Google</div>
</td>
<td style="padding: 18px 20px; line-height: 1.5; color: #555;">
Full-featured framework, TypeScript integration, dependency injection, comprehensive CLI tools, enterprise-ready architecture, and robust testing utilities.
</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #f39c12;">91k</td>
<td style="padding: 18px 12px; text-align: center; font-weight: bold; color: #e74c3c;">2.8M</td>
</tr>
</tbody>
</table>
</div>

Dynamic Width Management

Creating adaptive tables that respond to content and context:

// table-width-manager.js - Dynamic table width optimization
class TableWidthManager {
    constructor(tableElement, options = {}) {
        this.table = tableElement;
        this.options = {
            minColumnWidth: options.minColumnWidth || 100,
            maxColumnWidth: options.maxColumnWidth || 300,
            responsiveBreakpoint: options.responsiveBreakpoint || 768,
            contentPaddingRatio: options.contentPaddingRatio || 0.1,
            priorityColumns: options.priorityColumns || [],
            hiddenColumns: options.hiddenColumns || [],
            ...options
        };
        
        this.columnData = [];
        this.observers = [];
        this.init();
    }
    
    init() {
        this.analyzeTableStructure();
        this.calculateOptimalWidths();
        this.applyResponsiveStyles();
        this.setupResizeObserver();
        this.addInteractiveFeatures();
    }
    
    analyzeTableStructure() {
        const headers = this.table.querySelectorAll('thead th, thead td');
        const rows = this.table.querySelectorAll('tbody tr');
        
        this.columnData = Array.from(headers).map((header, index) => {
            const columnCells = Array.from(rows).map(row => row.children[index]);
            const contentLengths = columnCells.map(cell => 
                cell ? cell.textContent.length : 0
            );
            
            return {
                index,
                header,
                cells: columnCells,
                title: header.textContent.trim(),
                avgContentLength: contentLengths.reduce((sum, len) => sum + len, 0) / contentLengths.length,
                maxContentLength: Math.max(...contentLengths),
                minContentLength: Math.min(...contentLengths),
                dataType: this.detectDataType(columnCells),
                priority: this.options.priorityColumns.includes(index) ? 'high' : 'normal',
                hidden: this.options.hiddenColumns.includes(index)
            };
        });
    }
    
    detectDataType(cells) {
        const sampleContent = cells.slice(0, 5).map(cell => 
            cell ? cell.textContent.trim() : ''
        );
        
        // Detect numeric data
        if (sampleContent.every(content => /^\$?\d+\.?\d*$/.test(content))) {
            return 'numeric';
        }
        
        // Detect date data
        if (sampleContent.every(content => /^\d{4}-\d{2}-\d{2}/.test(content))) {
            return 'date';
        }
        
        // Detect short categorical data
        if (sampleContent.every(content => content.length < 20)) {
            return 'categorical';
        }
        
        // Detect long text content
        if (sampleContent.some(content => content.length > 100)) {
            return 'text';
        }
        
        return 'mixed';
    }
    
    calculateOptimalWidths() {
        const tableWidth = this.table.offsetWidth;
        const totalColumns = this.columnData.length;
        const baseWidth = tableWidth / totalColumns;
        
        this.columnData.forEach(column => {
            let optimalWidth;
            
            switch (column.dataType) {
                case 'numeric':
                    optimalWidth = Math.max(80, Math.min(120, baseWidth));
                    break;
                case 'date':
                    optimalWidth = Math.max(100, Math.min(140, baseWidth));
                    break;
                case 'categorical':
                    optimalWidth = Math.max(100, Math.min(150, baseWidth * 0.8));
                    break;
                case 'text':
                    optimalWidth = Math.max(200, baseWidth * 1.5);
                    break;
                default:
                    optimalWidth = baseWidth;
            }
            
            // Adjust for priority
            if (column.priority === 'high') {
                optimalWidth *= 1.3;
            }
            
            // Apply min/max constraints
            column.optimalWidth = Math.max(
                this.options.minColumnWidth,
                Math.min(this.options.maxColumnWidth, optimalWidth)
            );
        });
        
        // Normalize to fit table width
        this.normalizeWidths();
    }
    
    normalizeWidths() {
        const totalOptimalWidth = this.columnData.reduce((sum, col) => sum + col.optimalWidth, 0);
        const tableWidth = this.table.offsetWidth;
        const ratio = tableWidth / totalOptimalWidth;
        
        this.columnData.forEach(column => {
            column.finalWidth = Math.round(column.optimalWidth * ratio);
        });
    }
    
    applyResponsiveStyles() {
        const style = document.createElement('style');
        let css = `
            .dynamic-table-${this.table.id || 'default'} {
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed;
            }
        `;
        
        // Apply column widths
        this.columnData.forEach((column, index) => {
            css += `
                .dynamic-table-${this.table.id || 'default'} th:nth-child(${index + 1}),
                .dynamic-table-${this.table.id || 'default'} td:nth-child(${index + 1}) {
                    width: ${column.finalWidth}px;
                    ${column.hidden ? 'display: none;' : ''}
                }
            `;
        });
        
        // Responsive styles
        css += `
            @media (max-width: ${this.options.responsiveBreakpoint}px) {
                .dynamic-table-${this.table.id || 'default'} {
                    display: block;
                    overflow-x: auto;
                    white-space: nowrap;
                }
                
                ${this.generateMobileStyles()}
            }
        `;
        
        style.textContent = css;
        document.head.appendChild(style);
        
        this.table.classList.add(`dynamic-table-${this.table.id || 'default'}`);
    }
    
    generateMobileStyles() {
        let mobileCSS = '';
        
        // Hide less important columns on mobile
        this.columnData.forEach((column, index) => {
            if (column.priority !== 'high' && column.dataType === 'text') {
                mobileCSS += `
                    .dynamic-table-${this.table.id || 'default'} th:nth-child(${index + 1}),
                    .dynamic-table-${this.table.id || 'default'} td:nth-child(${index + 1}) {
                        display: none;
                    }
                `;
            }
        });
        
        return mobileCSS;
    }
    
    setupResizeObserver() {
        if (window.ResizeObserver) {
            const observer = new ResizeObserver(entries => {
                this.handleResize();
            });
            
            observer.observe(this.table);
            this.observers.push(observer);
        }
    }
    
    handleResize() {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(() => {
            this.calculateOptimalWidths();
            this.applyResponsiveStyles();
        }, 150);
    }
    
    addInteractiveFeatures() {
        // Add column resize handles
        this.table.querySelectorAll('th').forEach((th, index) => {
            const resizeHandle = document.createElement('div');
            resizeHandle.className = 'column-resize-handle';
            resizeHandle.style.cssText = `
                position: absolute;
                top: 0;
                right: 0;
                width: 4px;
                height: 100%;
                background: transparent;
                cursor: col-resize;
                user-select: none;
            `;
            
            th.style.position = 'relative';
            th.appendChild(resizeHandle);
            
            this.setupColumnResize(resizeHandle, index);
        });
        
        // Add column visibility toggles
        this.addColumnToggleControls();
    }
    
    setupColumnResize(handle, columnIndex) {
        let isResizing = false;
        let startX = 0;
        let startWidth = 0;
        
        handle.addEventListener('mousedown', e => {
            isResizing = true;
            startX = e.clientX;
            startWidth = this.columnData[columnIndex].finalWidth;
            document.body.style.cursor = 'col-resize';
            e.preventDefault();
        });
        
        document.addEventListener('mousemove', e => {
            if (!isResizing) return;
            
            const deltaX = e.clientX - startX;
            const newWidth = Math.max(50, startWidth + deltaX);
            
            this.columnData[columnIndex].finalWidth = newWidth;
            this.updateColumnWidth(columnIndex, newWidth);
        });
        
        document.addEventListener('mouseup', () => {
            if (isResizing) {
                isResizing = false;
                document.body.style.cursor = '';
            }
        });
    }
    
    updateColumnWidth(columnIndex, width) {
        const style = document.querySelector(`style[data-column-${columnIndex}]`) || document.createElement('style');
        style.setAttribute(`data-column-${columnIndex}`, '');
        style.textContent = `
            .dynamic-table-${this.table.id || 'default'} th:nth-child(${columnIndex + 1}),
            .dynamic-table-${this.table.id || 'default'} td:nth-child(${columnIndex + 1}) {
                width: ${width}px !important;
            }
        `;
        
        if (!style.parentNode) {
            document.head.appendChild(style);
        }
    }
    
    addColumnToggleControls() {
        const controls = document.createElement('div');
        controls.className = 'table-column-controls';
        controls.style.cssText = `
            margin: 10px 0;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 12px;
        `;
        
        controls.innerHTML = `
            <strong>Column Visibility:</strong>
            ${this.columnData.map((column, index) => `
                <label style="margin-left: 15px; cursor: pointer;">
                    <input type="checkbox" ${!column.hidden ? 'checked' : ''} 
                           data-column-index="${index}" style="margin-right: 4px;">
                    ${column.title}
                </label>
            `).join('')}
        `;
        
        controls.addEventListener('change', e => {
            if (e.target.type === 'checkbox') {
                const columnIndex = parseInt(e.target.dataset.columnIndex);
                this.toggleColumn(columnIndex, e.target.checked);
            }
        });
        
        this.table.parentNode.insertBefore(controls, this.table);
    }
    
    toggleColumn(columnIndex, visible) {
        this.columnData[columnIndex].hidden = !visible;
        
        const selector = `.dynamic-table-${this.table.id || 'default'} th:nth-child(${columnIndex + 1}),
                         .dynamic-table-${this.table.id || 'default'} td:nth-child(${columnIndex + 1})`;
        
        const elements = document.querySelectorAll(selector);
        elements.forEach(el => {
            el.style.display = visible ? '' : 'none';
        });
    }
    
    getTableMetrics() {
        return {
            totalWidth: this.table.offsetWidth,
            columnCount: this.columnData.length,
            averageColumnWidth: this.columnData.reduce((sum, col) => sum + col.finalWidth, 0) / this.columnData.length,
            columnData: this.columnData.map(col => ({
                title: col.title,
                width: col.finalWidth,
                dataType: col.dataType,
                priority: col.priority,
                hidden: col.hidden
            }))
        };
    }
    
    destroy() {
        this.observers.forEach(observer => observer.disconnect());
        
        // Remove generated styles
        const styles = document.querySelectorAll(`style[class*="dynamic-table-${this.table.id || 'default'}"]`);
        styles.forEach(style => style.remove());
        
        // Remove controls
        const controls = this.table.parentNode.querySelector('.table-column-controls');
        if (controls) controls.remove();
    }
}

// Usage example and initialization
function initializeDynamicTables() {
    const tables = document.querySelectorAll('.dynamic-width-table');
    
    tables.forEach((table, index) => {
        if (!table.id) {
            table.id = `dynamic-table-${index}`;
        }
        
        new TableWidthManager(table, {
            minColumnWidth: 80,
            maxColumnWidth: 400,
            responsiveBreakpoint: 768,
            priorityColumns: [0, 1], // First two columns are high priority
            hiddenColumns: [] // No hidden columns by default
        });
    });
}

// Initialize when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeDynamicTables);
} else {
    initializeDynamicTables();
}

module.exports = TableWidthManager;

Cell Padding and Spacing Optimization

Advanced Padding Strategies

Creating consistent, readable table layouts with optimal spacing:

<!-- Advanced Cell Padding Examples -->

<style>
.padding-demo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.padding-compact td, .padding-compact th {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.3;
}

.padding-standard td, .padding-standard th {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
}

.padding-comfortable td, .padding-comfortable th {
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.5;
}

.padding-spacious td, .padding-spacious th {
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.6;
}

/* Contextual padding for different content types */
.content-numeric { 
    padding-left: 8px !important; 
    padding-right: 16px !important; 
    text-align: right; 
    font-variant-numeric: tabular-nums;
}

.content-text { 
    padding: 12px 16px !important; 
    line-height: 1.5; 
}

.content-categorical { 
    padding: 8px 12px !important; 
    text-align: center; 
}

.content-header { 
    padding: 14px 16px !important; 
    font-weight: 600; 
    background-color: #f8f9fa; 
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
    .padding-demo-table td, 
    .padding-demo-table th {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}
</style>

<!-- Compact Padding Example -->
<h4>Compact Table (Dense Data)</h4>
<table class="padding-demo-table padding-compact" style="border: 1px solid #dee2e6;">
<thead>
<tr style="background-color: #e9ecef;">
<th style="border: 1px solid #dee2e6;">ID</th>
<th style="border: 1px solid #dee2e6;">Product</th>
<th style="border: 1px solid #dee2e6;">SKU</th>
<th style="border: 1px solid #dee2e6;">Stock</th>
<th style="border: 1px solid #dee2e6;" class="content-numeric">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #dee2e6;">001</td>
<td style="border: 1px solid #dee2e6;">Wireless Mouse</td>
<td style="border: 1px solid #dee2e6;">WM-2024-001</td>
<td style="border: 1px solid #dee2e6; text-align: center;">150</td>
<td style="border: 1px solid #dee2e6;" class="content-numeric">$29.99</td>
</tr>
<tr style="background-color: #f8f9fa;">
<td style="border: 1px solid #dee2e6;">002</td>
<td style="border: 1px solid #dee2e6;">Bluetooth Keyboard</td>
<td style="border: 1px solid #dee2e6;">BK-2024-002</td>
<td style="border: 1px solid #dee2e6; text-align: center;">75</td>
<td style="border: 1px solid #dee2e6;" class="content-numeric">$89.99</td>
</tr>
<tr>
<td style="border: 1px solid #dee2e6;">003</td>
<td style="border: 1px solid #dee2e6;">USB-C Hub</td>
<td style="border: 1px solid #dee2e6;">UC-2024-003</td>
<td style="border: 1px solid #dee2e6; text-align: center;">45</td>
<td style="border: 1px solid #dee2e6;" class="content-numeric">$59.99</td>
</tr>
</tbody>
</table>

<!-- Standard Padding Example -->
<h4>Standard Table (Balanced Readability)</h4>
<table class="padding-demo-table padding-standard" style="border: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<thead>
<tr style="background: linear-gradient(135deg, #667eea, #764ba2); color: white;">
<th style="border: 1px solid rgba(255,255,255,0.3);">Customer</th>
<th style="border: 1px solid rgba(255,255,255,0.3);">Order Details</th>
<th style="border: 1px solid rgba(255,255,255,0.3);">Status</th>
<th style="border: 1px solid rgba(255,255,255,0.3);" class="content-numeric">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #dee2e6;">
<strong>John Smith</strong><br>
<span style="color: #666; font-size: 12px;">[email protected]</span>
</td>
<td style="border: 1px solid #dee2e6;" class="content-text">
Premium Laptop Bundle including wireless mouse, keyboard, and carrying case. Express shipping requested for business use.
</td>
<td style="border: 1px solid #dee2e6; text-align: center;">
<span style="background: #28a745; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;">COMPLETED</span>
</td>
<td style="border: 1px solid #dee2e6;" class="content-numeric">$1,299.00</td>
</tr>
<tr style="background-color: #f8f9fa;">
<td style="border: 1px solid #dee2e6;">
<strong>Sarah Johnson</strong><br>
<span style="color: #666; font-size: 12px;">[email protected]</span>
</td>
<td style="border: 1px solid #dee2e6;" class="content-text">
Office setup package with ergonomic chair, standing desk, and lighting equipment. Bulk discount applied for corporate purchase.
</td>
<td style="border: 1px solid #dee2e6; text-align: center;">
<span style="background: #ffc107; color: #212529; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;">PROCESSING</span>
</td>
<td style="border: 1px solid #dee2e6;" class="content-numeric">$2,450.00</td>
</tr>
</tbody>
</table>

<!-- Comfortable Padding Example -->
<h4>Comfortable Table (Enhanced Readability)</h4>
<table class="padding-demo-table padding-comfortable" style="border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;">
<thead>
<tr style="background-color: #343a40; color: white;">
<th style="border-right: 1px solid #495057;">Project Name</th>
<th style="border-right: 1px solid #495057;">Description & Objectives</th>
<th style="border-right: 1px solid #495057;">Timeline</th>
<th>Budget</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;">
<div style="font-weight: 600; font-size: 16px; margin-bottom: 4px;">E-Commerce Platform</div>
<div style="color: #666; font-size: 12px;">Internal Project #2024-001</div>
</td>
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;" class="content-text">
Development of a comprehensive e-commerce solution with advanced inventory management, customer analytics, and mobile-responsive design. Integration with existing payment systems and third-party logistics providers.
</td>
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; text-align: center;">
<div style="font-weight: 600;">8 months</div>
<div style="color: #666; font-size: 12px;">Jan - Aug 2024</div>
</td>
<td style="border-bottom: 1px solid #dee2e6;" class="content-numeric">
<div style="font-size: 18px; font-weight: bold; color: #28a745;">$285,000</div>
<div style="font-size: 11px; color: #666;">Approved Budget</div>
</td>
</tr>
<tr style="background-color: #f8f9fa;">
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;">
<div style="font-weight: 600; font-size: 16px; margin-bottom: 4px;">Mobile App Redesign</div>
<div style="color: #666; font-size: 12px;">Internal Project #2024-002</div>
</td>
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;" class="content-text">
Complete redesign of existing mobile application with focus on user experience improvements, performance optimization, and accessibility compliance. Includes user testing and iterative design phases.
</td>
<td style="border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; text-align: center;">
<div style="font-weight: 600;">12 weeks</div>
<div style="color: #666; font-size: 12px;">Mar - May 2024</div>
</td>
<td style="border-bottom: 1px solid #dee2e6;" class="content-numeric">
<div style="font-size: 18px; font-weight: bold; color: #28a745;">$120,000</div>
<div style="font-size: 11px; color: #666;">Approved Budget</div>
</td>
</tr>
</tbody>
</table>

<!-- Spacious Padding Example -->
<h4>Spacious Table (Premium Presentation)</h4>
<table class="padding-demo-table padding-spacious" style="border: none; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-radius: 12px; overflow: hidden; background: white;">
<thead>
<tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<th style="font-size: 14px; font-weight: 700; letter-spacing: 0.5px;">EXECUTIVE SUMMARY</th>
<th style="font-size: 14px; font-weight: 700; letter-spacing: 0.5px;">KEY METRICS & PERFORMANCE</th>
<th style="font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-align: center;">STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-bottom: 2px solid #f1f3f4; vertical-align: top;">
<div style="font-size: 20px; font-weight: bold; color: #333; margin-bottom: 8px;">Q4 2024 Revenue Report</div>
<div style="color: #666; line-height: 1.6; font-size: 14px;">
Comprehensive analysis of quarterly performance including regional breakdowns, product category analysis, and year-over-year growth comparisons with actionable insights for strategic planning.
</div>
</td>
<td style="border-bottom: 2px solid #f1f3f4; vertical-align: top;">
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
<div style="background: #e3f2fd; padding: 8px 12px; border-radius: 6px; flex: 1; min-width: 120px; text-align: center;">
<div style="font-size: 11px; color: #666; margin-bottom: 2px;">TOTAL REVENUE</div>
<div style="font-size: 18px; font-weight: bold; color: #1976d2;">$2.4M</div>
</div>
<div style="background: #e8f5e8; padding: 8px 12px; border-radius: 6px; flex: 1; min-width: 120px; text-align: center;">
<div style="font-size: 11px; color: #666; margin-bottom: 2px;">GROWTH RATE</div>
<div style="font-size: 18px; font-weight: bold; color: #388e3c;">+23%</div>
</div>
</div>
</td>
<td style="border-bottom: 2px solid #f1f3f4; text-align: center; vertical-align: middle;">
<div style="background: linear-gradient(135deg, #4caf50, #45a049); color: white; padding: 12px 20px; border-radius: 25px; font-weight: bold; display: inline-block;">
✓ COMPLETE
</div>
</td>
</tr>
</tbody>
</table>

Contextual Padding Systems

Adaptive padding based on content type and viewing context:

/* contextual-padding.css - Intelligent padding system */

.smart-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base padding classes */
.cell-padding-xs { padding: 4px 6px; }
.cell-padding-sm { padding: 8px 12px; }
.cell-padding-md { padding: 12px 16px; }
.cell-padding-lg { padding: 16px 20px; }
.cell-padding-xl { padding: 20px 24px; }

/* Content-aware padding */
.cell-numeric {
    padding: 8px 12px 8px 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.cell-currency {
    padding: 10px 16px 10px 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #28a745;
}

.cell-percentage {
    padding: 8px 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.cell-date {
    padding: 10px 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cell-status {
    padding: 6px 10px;
    text-align: center;
}

.cell-text-short {
    padding: 10px 14px;
    line-height: 1.3;
}

.cell-text-long {
    padding: 14px 18px;
    line-height: 1.5;
    vertical-align: top;
}

.cell-header-primary {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.cell-header-secondary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
}

/* Context-based adjustments */
.table-context-dashboard .smart-table td,
.table-context-dashboard .smart-table th {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.3;
}

.table-context-report .smart-table td,
.table-context-report .smart-table th {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.5;
}

.table-context-presentation .smart-table td,
.table-context-presentation .smart-table th {
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.6;
}

/* Density variations */
.table-density-compact .smart-table td,
.table-density-compact .smart-table th {
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.table-density-comfortable .smart-table td,
.table-density-comfortable .smart-table th {
    padding: 16px 20px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
    .smart-table td,
    .smart-table th {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .cell-text-long {
        padding: 10px 12px !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    .smart-table td,
    .smart-table th {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* Interactive padding states */
.smart-table tbody tr:hover td {
    background-color: #f8f9fa;
    transition: background-color 0.15s ease;
}

.smart-table tbody tr.row-selected td {
    background-color: #e3f2fd;
    box-shadow: inset 3px 0 0 #2196f3;
}

/* Print-specific padding */
@media print {
    .smart-table td,
    .smart-table th {
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* Accessibility enhancements */
.smart-table:focus-within td,
.smart-table:focus-within th {
    outline: 2px solid #2196f3;
    outline-offset: -2px;
}

.smart-table td[tabindex]:focus,
.smart-table th[tabindex]:focus {
    background-color: #fff3cd;
    box-shadow: inset 0 0 0 2px #856404;
}

Responsive Design and Mobile Optimization

Mobile-First Table Strategies

Creating tables that work effectively across all device sizes:

<!-- Mobile-Optimized Responsive Table -->

<style>
.mobile-optimized-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.mobile-optimized-table thead {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.mobile-optimized-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.mobile-optimized-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.mobile-optimized-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Mobile breakpoint styles */
@media (max-width: 768px) {
    .mobile-optimized-table {
        border: none;
        box-shadow: none;
    }
    
    .mobile-optimized-table,
    .mobile-optimized-table thead,
    .mobile-optimized-table tbody,
    .mobile-optimized-table th,
    .mobile-optimized-table td,
    .mobile-optimized-table tr {
        display: block;
    }
    
    .mobile-optimized-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .mobile-optimized-table tr {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        padding: 15px;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .mobile-optimized-table td {
        border: none;
        position: relative;
        padding-left: 35% !important;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left !important;
    }
    
    .mobile-optimized-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 30%;
        text-align: right;
        font-weight: bold;
        color: #333;
        font-size: 13px;
        padding-right: 10px;
    }
    
    .mobile-optimized-table td:first-child {
        padding-top: 0;
    }
    
    .mobile-optimized-table td:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .mobile-optimized-table tr {
        margin-bottom: 12px;
        padding: 12px;
    }
    
    .mobile-optimized-table td {
        padding-left: 40% !important;
        font-size: 14px;
    }
    
    .mobile-optimized-table td:before {
        width: 35%;
        font-size: 12px;
    }
}
</style>

<div class="table-wrapper">
<table class="mobile-optimized-table">
<thead>
<tr>
<th style="width: 15%;">Order ID</th>
<th style="width: 25%;">Customer</th>
<th style="width: 30%;">Products</th>
<th style="width: 15%;">Status</th>
<th style="width: 15%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order ID" style="font-weight: bold; color: #666;">#ORD-001</td>
<td data-label="Customer">
<div style="font-weight: 600;">Emma Thompson</div>
<div style="font-size: 12px; color: #666;">[email protected]</div>
</td>
<td data-label="Products">
<div>MacBook Pro 16" (x1)</div>
<div>Magic Mouse (x1)</div>
<div style="font-size: 12px; color: #666; margin-top: 4px;">+ 2 more items</div>
</td>
<td data-label="Status">
<span style="background: #28a745; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;">DELIVERED</span>
</td>
<td data-label="Total" style="font-weight: bold; color: #28a745; font-size: 16px;">$2,299.00</td>
</tr>
<tr>
<td data-label="Order ID" style="font-weight: bold; color: #666;">#ORD-002</td>
<td data-label="Customer">
<div style="font-weight: 600;">James Wilson</div>
<div style="font-size: 12px; color: #666;">[email protected]</div>
</td>
<td data-label="Products">
<div>iPad Air (x2)</div>
<div>Apple Pencil (x2)</div>
<div style="font-size: 12px; color: #666; margin-top: 4px;">Bulk discount applied</div>
</td>
<td data-label="Status">
<span style="background: #ffc107; color: #212529; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;">PROCESSING</span>
</td>
<td data-label="Total" style="font-weight: bold; color: #28a745; font-size: 16px;">$1,398.00</td>
</tr>
<tr>
<td data-label="Order ID" style="font-weight: bold; color: #666;">#ORD-003</td>
<td data-label="Customer">
<div style="font-weight: 600;">Sarah Chen</div>
<div style="font-size: 12px; color: #666;">[email protected]</div>
</td>
<td data-label="Products">
<div>iPhone 15 Pro (x1)</div>
<div>MagSafe Charger (x1)</div>
<div style="font-size: 12px; color: #666; margin-top: 4px;">Express shipping</div>
</td>
<td data-label="Status">
<span style="background: #17a2b8; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;">SHIPPED</span>
</td>
<td data-label="Total" style="font-weight: bold; color: #28a745; font-size: 16px;">$1,049.00</td>
</tr>
</tbody>
</table>
</div>

<!-- Alternative Horizontal Scroll Approach -->

<style>
.scroll-table-container {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background: white;
}

.scroll-table {
    min-width: 700px;
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.scroll-table thead {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.scroll-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.scroll-table th:last-child {
    border-right: none;
}

.scroll-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    white-space: nowrap;
}

.scroll-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Sticky first column */
.scroll-table th:first-child,
.scroll-table td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.scroll-table thead th:first-child {
    background: #2c3e50;
    z-index: 15;
}

/* Mobile scroll indicators */
@media (max-width: 768px) {
    .scroll-table-container:before {
        content: "← Scroll to see more →";
        display: block;
        text-align: center;
        padding: 8px;
        background: #f8f9fa;
        color: #666;
        font-size: 12px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .scroll-table th,
    .scroll-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
}
</style>

<div class="scroll-table-container">
<table class="scroll-table">
<thead>
<tr>
<th style="min-width: 100px;">Employee</th>
<th style="min-width: 120px;">Department</th>
<th style="min-width: 150px;">Position</th>
<th style="min-width: 100px;">Hire Date</th>
<th style="min-width: 100px;">Salary</th>
<th style="min-width: 120px;">Performance</th>
<th style="min-width: 100px;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: 600;">Alice Johnson</td>
<td>Engineering</td>
<td>Senior Software Engineer</td>
<td>2022-03-15</td>
<td style="font-weight: bold; color: #28a745;">$95,000</td>
<td style="text-align: center;">⭐⭐⭐⭐⭐</td>
<td><span style="background: #28a745; color: white; padding: 2px 6px; border-radius: 8px; font-size: 10px;">ACTIVE</span></td>
</tr>
<tr>
<td style="font-weight: 600;">Bob Smith</td>
<td>Marketing</td>
<td>Marketing Manager</td>
<td>2021-11-08</td>
<td style="font-weight: bold; color: #28a745;">$78,000</td>
<td style="text-align: center;">⭐⭐⭐⭐</td>
<td><span style="background: #28a745; color: white; padding: 2px 6px; border-radius: 8px; font-size: 10px;">ACTIVE</span></td>
</tr>
<tr>
<td style="font-weight: 600;">Carol Davis</td>
<td>Design</td>
<td>UX/UI Designer</td>
<td>2023-01-20</td>
<td style="font-weight: bold; color: #28a745;">$72,000</td>
<td style="text-align: center;">⭐⭐⭐⭐⭐</td>
<td><span style="background: #ffc107; color: #212529; padding: 2px 6px; border-radius: 8px; font-size: 10px;">REVIEW</span></td>
</tr>
</tbody>
</table>
</div>

Progressive Enhancement Framework

Building adaptive table systems that enhance based on capabilities:

// progressive-table-enhancer.js - Progressive table enhancement system
class ProgressiveTableEnhancer {
    constructor(tableElement, options = {}) {
        this.table = tableElement;
        this.options = {
            enableSorting: options.enableSorting !== false,
            enableFiltering: options.enableFiltering !== false,
            enableResizing: options.enableResizing !== false,
            enableExport: options.enableExport !== false,
            mobileBreakpoint: options.mobileBreakpoint || 768,
            compactBreakpoint: options.compactBreakpoint || 480,
            adaptivePadding: options.adaptivePadding !== false,
            stickyHeaders: options.stickyHeaders !== false,
            ...options
        };
        
        this.features = {
            touchSupport: 'ontouchstart' in window,
            resizeObserver: window.ResizeObserver,
            intersectionObserver: window.IntersectionObserver,
            cssGrid: CSS.supports('display', 'grid'),
            customProperties: CSS.supports('color', 'var(--test)'),
        };
        
        this.init();
    }
    
    init() {
        this.assessTableComplexity();
        this.applyBaseStyles();
        this.implementResponsiveStrategy();
        this.addProgressiveFeatures();
        this.setupEventListeners();
        this.optimizeForAccessibility();
    }
    
    assessTableComplexity() {
        const rows = this.table.querySelectorAll('tbody tr');
        const columns = this.table.querySelectorAll('thead th, thead td');
        const cellContent = Array.from(this.table.querySelectorAll('td')).map(td => td.textContent.length);
        
        this.complexity = {
            columnCount: columns.length,
            rowCount: rows.length,
            avgCellLength: cellContent.reduce((sum, len) => sum + len, 0) / cellContent.length,
            maxCellLength: Math.max(...cellContent),
            hasLongContent: cellContent.some(len => len > 100),
            isWide: columns.length > 6,
            isTall: rows.length > 20,
            totalCells: rows.length * columns.length
        };
        
        // Determine optimal strategy
        this.strategy = this.determineOptimalStrategy();
    }
    
    determineOptimalStrategy() {
        const { columnCount, rowCount, hasLongContent, isWide, isTall } = this.complexity;
        
        if (columnCount <= 3 && !hasLongContent) {
            return 'simple-responsive';
        } else if (columnCount <= 5 && rowCount <= 50) {
            return 'card-transform';
        } else if (isWide || hasLongContent) {
            return 'horizontal-scroll';
        } else if (isTall) {
            return 'virtual-scroll';
        } else {
            return 'adaptive-hybrid';
        }
    }
    
    applyBaseStyles() {
        const styleId = `progressive-table-${this.generateId()}`;
        const existingStyle = document.getElementById(styleId);
        if (existingStyle) existingStyle.remove();
        
        const style = document.createElement('style');
        style.id = styleId;
        
        const css = this.generateBaseCSS();
        style.textContent = css;
        document.head.appendChild(style);
        
        this.table.classList.add('progressive-table', `strategy-${this.strategy}`);
    }
    
    generateBaseCSS() {
        return `
            .progressive-table {
                width: 100%;
                border-collapse: collapse;
                margin: 20px 0;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                background: white;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            
            .progressive-table th {
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                padding: 16px 20px;
                text-align: left;
                font-weight: 600;
                font-size: 14px;
                position: relative;
            }
            
            .progressive-table td {
                padding: 14px 20px;
                border-bottom: 1px solid #f0f0f0;
                vertical-align: top;
                transition: background-color 0.15s ease;
            }
            
            .progressive-table tbody tr:hover td {
                background-color: #f8f9fa;
            }
            
            ${this.generateStrategyCSS()}
            ${this.generateResponsiveCSS()}
        `;
    }
    
    generateStrategyCSS() {
        switch (this.strategy) {
            case 'simple-responsive':
                return `
                    @media (max-width: ${this.options.mobileBreakpoint}px) {
                        .strategy-simple-responsive td,
                        .strategy-simple-responsive th {
                            padding: 10px 12px;
                            font-size: 13px;
                        }
                    }
                `;
                
            case 'card-transform':
                return `
                    @media (max-width: ${this.options.mobileBreakpoint}px) {
                        .strategy-card-transform,
                        .strategy-card-transform thead,
                        .strategy-card-transform tbody,
                        .strategy-card-transform th,
                        .strategy-card-transform td,
                        .strategy-card-transform tr {
                            display: block;
                        }
                        
                        .strategy-card-transform thead tr {
                            position: absolute;
                            top: -9999px;
                            left: -9999px;
                        }
                        
                        .strategy-card-transform tr {
                            border: 1px solid #ddd;
                            margin-bottom: 15px;
                            padding: 15px;
                            border-radius: 8px;
                            background: white;
                        }
                        
                        .strategy-card-transform td {
                            border: none;
                            position: relative;
                            padding-left: 35% !important;
                        }
                        
                        .strategy-card-transform td:before {
                            content: attr(data-label) ": ";
                            position: absolute;
                            left: 6px;
                            width: 30%;
                            text-align: right;
                            font-weight: bold;
                            color: #333;
                        }
                    }
                `;
                
            case 'horizontal-scroll':
                return `
                    .strategy-horizontal-scroll {
                        display: block;
                        overflow-x: auto;
                        white-space: nowrap;
                    }
                    
                    .strategy-horizontal-scroll table {
                        min-width: 100%;
                    }
                    
                    .strategy-horizontal-scroll th:first-child,
                    .strategy-horizontal-scroll td:first-child {
                        position: sticky;
                        left: 0;
                        background: white;
                        z-index: 2;
                    }
                    
                    .strategy-horizontal-scroll thead th:first-child {
                        background: #667eea;
                        z-index: 3;
                    }
                `;
                
            default:
                return '';
        }
    }
    
    generateResponsiveCSS() {
        return `
            @media (max-width: ${this.options.compactBreakpoint}px) {
                .progressive-table th,
                .progressive-table td {
                    padding: 8px 10px !important;
                    font-size: 12px !important;
                }
            }
            
            @media print {
                .progressive-table {
                    box-shadow: none;
                    border: 1px solid #ddd;
                }
                
                .progressive-table th,
                .progressive-table td {
                    padding: 6px 8px !important;
                    font-size: 10px !important;
                }
            }
        `;
    }
    
    implementResponsiveStrategy() {
        if (this.strategy === 'card-transform') {
            this.addDataLabels();
        } else if (this.strategy === 'horizontal-scroll') {
            this.wrapInScrollContainer();
        } else if (this.strategy === 'virtual-scroll') {
            this.implementVirtualScrolling();
        }
    }
    
    addDataLabels() {
        const headers = Array.from(this.table.querySelectorAll('thead th'));
        const rows = this.table.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            cells.forEach((cell, index) => {
                if (headers[index]) {
                    cell.setAttribute('data-label', headers[index].textContent.trim());
                }
            });
        });
    }
    
    wrapInScrollContainer() {
        const wrapper = document.createElement('div');
        wrapper.className = 'table-scroll-wrapper';
        wrapper.style.cssText = `
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background: white;
        `;
        
        this.table.parentNode.insertBefore(wrapper, this.table);
        wrapper.appendChild(this.table);
        
        // Add scroll indicators
        this.addScrollIndicators(wrapper);
    }
    
    addScrollIndicators(container) {
        const leftIndicator = document.createElement('div');
        const rightIndicator = document.createElement('div');
        
        [leftIndicator, rightIndicator].forEach((indicator, index) => {
            indicator.className = `scroll-indicator ${index === 0 ? 'left' : 'right'}`;
            indicator.style.cssText = `
                position: absolute;
                top: 0;
                ${index === 0 ? 'left: 0;' : 'right: 0;'}
                width: 20px;
                height: 100%;
                background: linear-gradient(${index === 0 ? '90deg' : '270deg'}, rgba(0,0,0,0.1), transparent);
                pointer-events: none;
                z-index: 5;
                opacity: 0;
                transition: opacity 0.3s ease;
            `;
            container.appendChild(indicator);
        });
        
        container.addEventListener('scroll', () => {
            const { scrollLeft, scrollWidth, clientWidth } = container;
            
            leftIndicator.style.opacity = scrollLeft > 0 ? '1' : '0';
            rightIndicator.style.opacity = scrollLeft < scrollWidth - clientWidth ? '1' : '0';
        });
    }
    
    addProgressiveFeatures() {
        if (this.options.enableSorting && this.complexity.rowCount > 5) {
            this.addSortingCapability();
        }
        
        if (this.options.enableFiltering && this.complexity.rowCount > 10) {
            this.addFilteringCapability();
        }
        
        if (this.options.enableResizing) {
            this.addColumnResizing();
        }
        
        if (this.options.stickyHeaders && this.complexity.isTall) {
            this.makeStickyHeaders();
        }
    }
    
    addSortingCapability() {
        const headers = this.table.querySelectorAll('thead th');
        
        headers.forEach((header, index) => {
            header.style.cursor = 'pointer';
            header.innerHTML += ' <span class="sort-indicator">↕️</span>';
            
            header.addEventListener('click', () => {
                this.sortByColumn(index);
            });
        });
    }
    
    sortByColumn(columnIndex) {
        const rows = Array.from(this.table.querySelectorAll('tbody tr'));
        const isNumeric = this.isNumericColumn(columnIndex);
        
        rows.sort((a, b) => {
            const aVal = a.children[columnIndex].textContent.trim();
            const bVal = b.children[columnIndex].textContent.trim();
            
            if (isNumeric) {
                return parseFloat(aVal) - parseFloat(bVal);
            } else {
                return aVal.localeCompare(bVal);
            }
        });
        
        const tbody = this.table.querySelector('tbody');
        rows.forEach(row => tbody.appendChild(row));
    }
    
    isNumericColumn(columnIndex) {
        const cells = this.table.querySelectorAll(`tbody tr td:nth-child(${columnIndex + 1})`);
        const sampleValues = Array.from(cells).slice(0, 5).map(cell => cell.textContent.trim());
        
        return sampleValues.every(val => /^\$?\d+\.?\d*%?$/.test(val));
    }
    
    setupEventListeners() {
        if (this.features.resizeObserver) {
            const observer = new ResizeObserver(entries => {
                this.handleResize();
            });
            observer.observe(this.table);
        }
        
        window.addEventListener('orientationchange', () => {
            setTimeout(() => this.handleResize(), 100);
        });
    }
    
    handleResize() {
        this.applyAdaptivePadding();
        this.updateResponsiveStrategy();
    }
    
    applyAdaptivePadding() {
        if (!this.options.adaptivePadding) return;
        
        const tableWidth = this.table.offsetWidth;
        const columnCount = this.complexity.columnCount;
        const avgColumnWidth = tableWidth / columnCount;
        
        let paddingClass = 'cell-padding-md';
        
        if (avgColumnWidth < 100) {
            paddingClass = 'cell-padding-xs';
        } else if (avgColumnWidth < 150) {
            paddingClass = 'cell-padding-sm';
        } else if (avgColumnWidth > 250) {
            paddingClass = 'cell-padding-lg';
        }
        
        this.table.className = this.table.className.replace(/cell-padding-\w+/g, '');
        this.table.classList.add(paddingClass);
    }
    
    optimizeForAccessibility() {
        // Add ARIA attributes
        this.table.setAttribute('role', 'table');
        this.table.setAttribute('aria-label', 'Data table with sortable columns');
        
        // Add keyboard navigation
        this.table.setAttribute('tabindex', '0');
        
        // Announce changes to screen readers
        const announcement = document.createElement('div');
        announcement.setAttribute('aria-live', 'polite');
        announcement.setAttribute('aria-atomic', 'true');
        announcement.className = 'sr-only';
        announcement.style.cssText = `
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        `;
        
        this.table.parentNode.insertBefore(announcement, this.table);
        this.announcement = announcement;
    }
    
    announceChange(message) {
        if (this.announcement) {
            this.announcement.textContent = message;
            setTimeout(() => {
                this.announcement.textContent = '';
            }, 1000);
        }
    }
    
    generateId() {
        return Math.random().toString(36).substr(2, 9);
    }
    
    destroy() {
        // Clean up event listeners and observers
        // Remove generated styles
        // Reset table to original state
    }
}

// Auto-initialize progressive tables
document.addEventListener('DOMContentLoaded', () => {
    const tables = document.querySelectorAll('table[data-progressive="true"]');
    
    tables.forEach(table => {
        const options = JSON.parse(table.dataset.options || '{}');
        new ProgressiveTableEnhancer(table, options);
    });
});

// Export for module systems
if (typeof module !== 'undefined' && module.exports) {
    module.exports = ProgressiveTableEnhancer;
}

Integration with Modern Workflows

Table column width and cell padding techniques integrate seamlessly with comprehensive content management systems. When combined with responsive image optimization, professional table formatting creates cohesive documentation that maintains visual consistency across text, images, and data presentation while adapting to different viewing environments and device capabilities.

For advanced content architectures, table formatting works effectively with automation workflows and CI/CD integration by ensuring that automated content processing maintains proper table formatting, validates column width specifications, and applies consistent padding standards across large documentation projects while supporting efficient content production and deployment processes.

When building sophisticated documentation systems, column width management complements syntax highlighting and code presentation by creating technical documentation that seamlessly integrates formatted code examples within properly sized table cells, maintaining readability and preventing layout conflicts between code blocks and table structures.

Performance Optimization and Best Practices

Efficient Rendering Strategies

Optimizing table performance for large datasets and complex layouts:

// table-performance-optimizer.js - Performance optimization utilities
class TablePerformanceOptimizer {
    constructor(tableElement, options = {}) {
        this.table = tableElement;
        this.options = {
            virtualScrollThreshold: options.virtualScrollThreshold || 100,
            lazyRenderThreshold: options.lazyRenderThreshold || 50,
            debounceDelay: options.debounceDelay || 150,
            enableVirtualization: options.enableVirtualization !== false,
            enableLazyRendering: options.enableLazyRendering !== false,
            enableCaching: options.enableCaching !== false,
            maxVisibleRows: options.maxVisibleRows || 50,
            ...options
        };
        
        this.cache = new Map();
        this.renderQueue = [];
        this.observers = [];
        this.metrics = {
            renderTime: [],
            scrollEvents: 0,
            cacheHits: 0,
            cacheMisses: 0
        };
        
        this.init();
    }
    
    init() {
        this.analyzeTableSize();
        this.determineOptimizationStrategy();
        this.implementOptimizations();
        this.setupPerformanceMonitoring();
    }
    
    analyzeTableSize() {
        const rows = this.table.querySelectorAll('tbody tr');
        const cells = this.table.querySelectorAll('td');
        
        this.tableSize = {
            rowCount: rows.length,
            columnCount: this.table.querySelectorAll('thead th').length,
            cellCount: cells.length,
            avgCellContent: this.calculateAverageContentLength(cells),
            estimatedMemory: this.estimateMemoryUsage(cells),
            isLarge: rows.length > this.options.virtualScrollThreshold
        };
    }
    
    calculateAverageContentLength(cells) {
        const totalLength = Array.from(cells).reduce((sum, cell) => {
            return sum + (cell.textContent?.length || 0);
        }, 0);
        
        return totalLength / cells.length;
    }
    
    estimateMemoryUsage(cells) {
        const avgContentLength = this.calculateAverageContentLength(cells);
        const avgBytesPerCell = avgContentLength * 2; // Rough estimate for UTF-16
        const htmlOverhead = 100; // Rough estimate for HTML markup per cell
        
        return cells.length * (avgBytesPerCell + htmlOverhead);
    }
    
    determineOptimizationStrategy() {
        const { rowCount, cellCount, isLarge } = this.tableSize;
        
        this.strategy = {
            useVirtualization: isLarge && this.options.enableVirtualization,
            useLazyRendering: rowCount > this.options.lazyRenderThreshold && this.options.enableLazyRendering,
            useIntersectionObserver: 'IntersectionObserver' in window,
            useRequestIdleCallback: 'requestIdleCallback' in window,
            useCaching: this.options.enableCaching && cellCount > 1000
        };
    }
    
    implementOptimizations() {
        if (this.strategy.useVirtualization) {
            this.implementVirtualScrolling();
        }
        
        if (this.strategy.useLazyRendering) {
            this.implementLazyRendering();
        }
        
        if (this.strategy.useCaching) {
            this.setupCaching();
        }
        
        this.optimizeCSS();
        this.debounceScrollEvents();
    }
    
    implementVirtualScrolling() {
        const container = this.createVirtualScrollContainer();
        const viewport = this.createViewport();
        
        this.virtualScrollData = {
            container,
            viewport,
            rowHeight: this.calculateRowHeight(),
            visibleStartIndex: 0,
            visibleEndIndex: this.options.maxVisibleRows,
            totalRows: this.tableSize.rowCount,
            renderedRows: new Map()
        };
        
        this.setupVirtualScrollEvents();
        this.renderVisibleRows();
    }
    
    createVirtualScrollContainer() {
        const container = document.createElement('div');
        container.className = 'virtual-scroll-container';
        container.style.cssText = `
            height: 400px;
            overflow-y: auto;
            position: relative;
            border: 1px solid #ddd;
            border-radius: 4px;
        `;
        
        this.table.parentNode.insertBefore(container, this.table);
        container.appendChild(this.table);
        
        return container;
    }
    
    createViewport() {
        const viewport = document.createElement('div');
        viewport.className = 'virtual-scroll-viewport';
        viewport.style.cssText = `
            height: ${this.virtualScrollData.rowHeight * this.tableSize.rowCount}px;
            position: relative;
        `;
        
        this.virtualScrollData.container.appendChild(viewport);
        return viewport;
    }
    
    calculateRowHeight() {
        const sampleRow = this.table.querySelector('tbody tr');
        if (!sampleRow) return 40;
        
        const style = window.getComputedStyle(sampleRow);
        const height = parseInt(style.height) || 40;
        const marginTop = parseInt(style.marginTop) || 0;
        const marginBottom = parseInt(style.marginBottom) || 0;
        
        return height + marginTop + marginBottom;
    }
    
    setupVirtualScrollEvents() {
        const { container } = this.virtualScrollData;
        
        let scrollTimeout;
        container.addEventListener('scroll', () => {
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => {
                this.handleVirtualScroll();
            }, this.options.debounceDelay);
            
            this.metrics.scrollEvents++;
        });
    }
    
    handleVirtualScroll() {
        const { container, rowHeight } = this.virtualScrollData;
        const scrollTop = container.scrollTop;
        const containerHeight = container.clientHeight;
        
        const startIndex = Math.floor(scrollTop / rowHeight);
        const endIndex = Math.min(
            startIndex + Math.ceil(containerHeight / rowHeight) + 5, // 5 rows buffer
            this.tableSize.rowCount
        );
        
        this.virtualScrollData.visibleStartIndex = startIndex;
        this.virtualScrollData.visibleEndIndex = endIndex;
        
        this.renderVisibleRows();
    }
    
    renderVisibleRows() {
        const { visibleStartIndex, visibleEndIndex, renderedRows } = this.virtualScrollData;
        const tbody = this.table.querySelector('tbody');
        
        // Remove rows that are no longer visible
        renderedRows.forEach((row, index) => {
            if (index < visibleStartIndex || index >= visibleEndIndex) {
                row.remove();
                renderedRows.delete(index);
            }
        });
        
        // Add newly visible rows
        for (let i = visibleStartIndex; i < visibleEndIndex; i++) {
            if (!renderedRows.has(i)) {
                const row = this.createVirtualRow(i);
                if (row) {
                    tbody.appendChild(row);
                    renderedRows.set(i, row);
                }
            }
        }
        
        // Position the table correctly
        this.table.style.transform = `translateY(${visibleStartIndex * this.virtualScrollData.rowHeight}px)`;
    }
    
    createVirtualRow(index) {
        // This would be customized based on your data source
        // For now, we'll work with existing rows
        const allRows = Array.from(this.table.querySelectorAll('tbody tr'));
        const sourceRow = allRows[index];
        
        if (!sourceRow) return null;
        
        return sourceRow.cloneNode(true);
    }
    
    implementLazyRendering() {
        if (!this.strategy.useIntersectionObserver) return;
        
        const rows = this.table.querySelectorAll('tbody tr');
        const observer = new IntersectionObserver(
            (entries) => this.handleIntersection(entries),
            {
                root: this.table.closest('.table-container') || null,
                rootMargin: '100px',
                threshold: 0.1
            }
        );
        
        rows.forEach((row, index) => {
            if (index > this.options.lazyRenderThreshold) {
                this.prepareLazyRow(row);
                observer.observe(row);
            }
        });
        
        this.observers.push(observer);
    }
    
    prepareLazyRow(row) {
        const cells = row.querySelectorAll('td');
        cells.forEach(cell => {
            const content = cell.innerHTML;
            cell.dataset.lazyContent = content;
            cell.innerHTML = '<div class="lazy-placeholder">Loading...</div>';
        });
        
        row.classList.add('lazy-row');
    }
    
    handleIntersection(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                this.renderLazyRow(entry.target);
            }
        });
    }
    
    renderLazyRow(row) {
        const cells = row.querySelectorAll('td');
        
        const renderCells = () => {
            cells.forEach(cell => {
                if (cell.dataset.lazyContent) {
                    cell.innerHTML = cell.dataset.lazyContent;
                    delete cell.dataset.lazyContent;
                }
            });
            
            row.classList.remove('lazy-row');
        };
        
        if (this.strategy.useRequestIdleCallback) {
            requestIdleCallback(renderCells);
        } else {
            setTimeout(renderCells, 0);
        }
    }
    
    setupCaching() {
        // Cache expensive operations like sorting, filtering, calculations
        this.cache.clear();
        
        // Implement cache invalidation on data changes
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    this.invalidateCache();
                }
            });
        });
        
        observer.observe(this.table, {
            childList: true,
            subtree: true,
            characterData: true
        });
        
        this.observers.push(observer);
    }
    
    invalidateCache() {
        this.cache.clear();
        this.metrics.cacheHits = 0;
        this.metrics.cacheMisses = 0;
    }
    
    getCached(key, computeFn) {
        if (this.cache.has(key)) {
            this.metrics.cacheHits++;
            return this.cache.get(key);
        }
        
        this.metrics.cacheMisses++;
        const result = computeFn();
        this.cache.set(key, result);
        return result;
    }
    
    optimizeCSS() {
        // Add performance-optimized CSS
        const style = document.createElement('style');
        style.textContent = `
            .performance-optimized-table {
                table-layout: fixed;
                will-change: transform;
            }
            
            .performance-optimized-table td,
            .performance-optimized-table th {
                contain: layout style paint;
            }
            
            .lazy-row {
                contain: layout;
            }
            
            .lazy-placeholder {
                height: 20px;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: loading 1.5s infinite;
            }
            
            @keyframes loading {
                0% { background-position: 200% 0; }
                100% { background-position: -200% 0; }
            }
            
            .virtual-scroll-container {
                transform: translateZ(0);
            }
        `;
        
        document.head.appendChild(style);
        this.table.classList.add('performance-optimized-table');
    }
    
    debounceScrollEvents() {
        let scrollTimeout;
        
        this.table.addEventListener('scroll', (e) => {
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => {
                this.handleOptimizedScroll(e);
            }, this.options.debounceDelay);
        });
    }
    
    handleOptimizedScroll(event) {
        // Implement optimized scroll handling
        if (this.strategy.useIntersectionObserver) {
            // Intersection Observer will handle visibility updates
            return;
        }
        
        // Fallback for browsers without Intersection Observer
        this.updateVisibleElements();
    }
    
    updateVisibleElements() {
        const rows = this.table.querySelectorAll('tbody tr');
        const tableRect = this.table.getBoundingClientRect();
        
        rows.forEach((row, index) => {
            const rowRect = row.getBoundingClientRect();
            const isVisible = rowRect.top < tableRect.bottom && rowRect.bottom > tableRect.top;
            
            if (isVisible && row.classList.contains('lazy-row')) {
                this.renderLazyRow(row);
            }
        });
    }
    
    setupPerformanceMonitoring() {
        // Monitor rendering performance
        if ('performance' in window) {
            const observer = new PerformanceObserver((list) => {
                list.getEntries().forEach((entry) => {
                    if (entry.name.includes('table-render')) {
                        this.metrics.renderTime.push(entry.duration);
                    }
                });
            });
            
            observer.observe({ entryTypes: ['measure'] });
            this.observers.push(observer);
        }
    }
    
    measurePerformance(operationName, operation) {
        const startMark = `${operationName}-start`;
        const endMark = `${operationName}-end`;
        const measureName = `table-render-${operationName}`;
        
        performance.mark(startMark);
        const result = operation();
        performance.mark(endMark);
        performance.measure(measureName, startMark, endMark);
        
        return result;
    }
    
    getPerformanceMetrics() {
        const avgRenderTime = this.metrics.renderTime.length > 0
            ? this.metrics.renderTime.reduce((sum, time) => sum + time, 0) / this.metrics.renderTime.length
            : 0;
        
        return {
            tableSize: this.tableSize,
            strategy: this.strategy,
            renderTimes: {
                average: avgRenderTime,
                count: this.metrics.renderTime.length,
                recent: this.metrics.renderTime.slice(-5)
            },
            cache: {
                hits: this.metrics.cacheHits,
                misses: this.metrics.cacheMisses,
                hitRatio: this.metrics.cacheHits / (this.metrics.cacheHits + this.metrics.cacheMisses) || 0
            },
            scrollEvents: this.metrics.scrollEvents,
            memoryEstimate: this.tableSize.estimatedMemory
        };
    }
    
    destroy() {
        // Clean up observers
        this.observers.forEach(observer => {
            if (observer.disconnect) observer.disconnect();
        });
        
        // Clear cache
        this.cache.clear();
        
        // Remove performance monitoring
        this.metrics = null;
    }
}

// Usage example
document.addEventListener('DOMContentLoaded', () => {
    const largeTables = document.querySelectorAll('table[data-optimize="true"]');
    
    largeTables.forEach(table => {
        const options = {
            virtualScrollThreshold: parseInt(table.dataset.virtualThreshold) || 100,
            lazyRenderThreshold: parseInt(table.dataset.lazyThreshold) || 50,
            enableVirtualization: table.dataset.enableVirtual !== 'false',
            enableLazyRendering: table.dataset.enableLazy !== 'false',
            enableCaching: table.dataset.enableCache !== 'false'
        };
        
        new TablePerformanceOptimizer(table, options);
    });
});

if (typeof module !== 'undefined' && module.exports) {
    module.exports = TablePerformanceOptimizer;
}

Troubleshooting Common Issues

Column Width Conflicts

Problem: Columns don’t maintain specified widths or overlap content

Solutions:

/* Column Width Debugging Utilities */

.debug-table-layout {
    table-layout: fixed !important;
    border: 2px solid red;
}

.debug-table-layout th,
.debug-table-layout td {
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debug-table-layout th:before,
.debug-table-layout td:before {
    content: attr(style);
    font-size: 8px;
    color: red;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

/* Fix common width issues */
.width-fix-container {
    overflow-x: auto;
    max-width: 100%;
}

.width-fix-table {
    min-width: 100%;
    table-layout: fixed;
    width: 100%;
}

.width-fix-table th,
.width-fix-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

Mobile Padding Problems

Problem: Padding becomes too cramped or excessive on mobile devices

Solutions:

/* Mobile Padding Fixes */

@media (max-width: 768px) {
    .mobile-padding-fix {
        font-size: 14px;
    }
    
    .mobile-padding-fix th,
    .mobile-padding-fix td {
        padding: 10px 8px !important;
        line-height: 1.4;
    }
    
    .mobile-padding-fix .cell-text-long {
        padding: 12px 10px !important;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .mobile-padding-fix {
        font-size: 13px;
    }
    
    .mobile-padding-fix th,
    .mobile-padding-fix td {
        padding: 8px 6px !important;
    }
}

Platform Rendering Inconsistencies

Problem: Tables render differently across various Markdown processors

Solutions:

<!-- Platform-Safe Table Template -->

<div class="table-responsive">
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<colgroup>
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 35%;">
<col style="width: 15%;">
</colgroup>
<thead>
<tr style="background-color: #f8f9fa;">
<th style="padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;">Column 1</th>
<th style="padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;">Column 2</th>
<th style="padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;">Column 3</th>
<th style="padding: 12px 16px; border: 1px solid #dee2e6; text-align: left;">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px 16px; border: 1px solid #dee2e6;">Data 1</td>
<td style="padding: 10px 16px; border: 1px solid #dee2e6;">Data 2</td>
<td style="padding: 10px 16px; border: 1px solid #dee2e6;">Data 3</td>
<td style="padding: 10px 16px; border: 1px solid #dee2e6;">Data 4</td>
</tr>
</tbody>
</table>
</div>

Conclusion

Advanced Markdown table column width and cell padding techniques provide the foundation for creating professional, accessible, and responsive data presentations that serve users effectively across all platforms and devices. By mastering width control strategies, padding optimization, and responsive design principles, content creators can build sophisticated table layouts that maintain clarity and usability while accommodating diverse viewing contexts and user needs.

The key to successful table formatting lies in understanding the relationship between content structure, visual presentation, and user interaction patterns. Whether you’re creating dashboard layouts, data reports, or interactive documentation, the techniques covered in this guide provide the tools needed to create table designs that balance aesthetic appeal with functional requirements while ensuring accessibility and performance across the modern web ecosystem.

Remember to test your table designs across target platforms, implement responsive strategies that enhance rather than compromise usability, and maintain consistent formatting standards that support your content’s goals and user expectations. With proper attention to column width and cell padding, your Markdown tables can achieve the professional presentation quality that modern audiences expect while remaining maintainable and accessible to all users.