Adaptive table

Basic Concepts of Adaptive Tables

Tables have always played an important role in web design, but with the popularity of responsive design, traditional fixed-width tables can no longer meet the browsing needs of multiple devices. Adaptive tables use CSS3 technology to achieve flexible layout adjustments, automatically changing their display based on container width or viewport size.

Core Issues with Table Layouts

The main problems with traditional HTML tables are:

1. Fixed column widths cause horizontal scrollbars on small-screen devices
2. Content overflow disrupts the overall layout
3. Poor readability on mobile devices
4. Inability to handle long text content gracefully

<!-- Traditional table example -->
<table>
  <tr>
    <th>Product ID</th>
    <th>Product Name</th>
    <th>Detailed Description</th>
    <th>Price</th>
    <th>Inventory</th>
  </tr>
  <tr>
    <td>1001</td>
    <td>Wireless Mouse</td>
    <td>2.4GHz wireless transmission, ergonomic design, 6-month battery life</td>
    <td>¥129</td>
    <td>56</td>
  </tr>
</table>

CSS3 Implementation of Adaptive Layouts

Basic Responsive Solution

The simplest adaptive solution is to set the table width to 100% and enable horizontal scrolling:

.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Optimize mobile scrolling */
}

Media Query Adaptation

Adjust table styles for different screen sizes:

@media screen and (max-width: 600px) {
  .responsive-table {
    font-size: 14px;
  }
  .responsive-table td, 
  .responsive-table th {
    padding: 8px 4px;
  }
}

Advanced Adaptive Techniques

Table Column Collapsing Technique

Convert row data into a name-value pair display on small screens:

@media screen and (max-width: 480px) {
  .collapse-table thead { display: none; }
  .collapse-table tr { 
    display: block; 
    margin-bottom: 1em;
    border: 1px solid #ddd;
  }
  .collapse-table td {
    display: flex;
    border: none;
  }
  .collapse-table td::before {
    content: attr(data-label);
    font-weight: bold;
    width: 120px;
    flex-shrink: 0;
  }
}

Corresponding HTML requires data attributes:

<table class="collapse-table">
  <tr>
    <td data-label="Product ID">1001</td>
    <td data-label="Product Name">Wireless Mouse</td>
    <!-- Other columns -->
  </tr>
</table>

Fixed Header with Scrollable Content

For long tables, keep the header fixed:

.scrollable-table {
  height: 400px;
  display: flex;
  flex-direction: column;
}
.scrollable-table thead {
  flex-shrink: 0;
}
.scrollable-table tbody {
  flex-grow: 1;
  overflow-y: auto;
}

Modern CSS Layout Solutions

CSS Grid Table Layout

Use Grid for more flexible table layouts:

.grid-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-table thead,
.grid-table tbody,
.grid-table tr {
  display: contents;
}

.grid-table th,
.grid-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

Flexbox Table Layout

Use Flexbox for equal-width columns:

.flex-table {
  display: flex;
  flex-direction: column;
}
.flex-table-row {
  display: flex;
}
.flex-table-cell {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
}

Interactive Enhancement Techniques

Hover Highlight Effect

.hover-table tr:hover {
  background-color: #f5f5f5;
  transition: background 0.3s ease;
}

Zebra Striping

.striped-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

Performance Optimization Considerations

1. Avoid complex selectors on large tables
2. Use position: sticky for fixed headers
3. Consider virtual scrolling for very large datasets
4. Use will-change property to optimize rendering performance

.sticky-header th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Practical Application Example

Responsive implementation of an e-commerce product comparison table:

<div class="comparison-table-container">
  <table class="comparison-table">
    <thead>
      <tr>
        <th>Feature</th>
        <th>Basic</th>
        <th>Pro</th>
        <th>Enterprise</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Feature">Storage Space</td>
        <td data-label="Basic">50GB</td>
        <td data-label="Pro">200GB</td>
        <td data-label="Enterprise">1TB</td>
      </tr>
      <!-- More rows -->
    </tbody>
  </table>
</div>

.comparison-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
}

.comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  .comparison-table {
    min-width: 100%;
  }
  /* Add mobile-specific styles */
}

Accessibility Best Practices

1. Ensure tables have appropriate <caption>
2. Use scope attribute to clarify header associations
3. Add ARIA roles for complex tables
4. Maintain sufficient color contrast

<table aria-describedby="table-desc">
  <caption id="table-desc">2023 Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Sales</th>
      <th scope="col">Growth Rate</th>
    </tr>
  </thead>
  <!-- Table content -->
</table>

Browser Compatibility Strategy

1. Use feature queries to detect CSS support
2. Provide progressively enhanced experiences
3. Prepare fallback solutions for older browsers

@supports (display: grid) {
  .modern-table {
    display: grid;
    /* Modern layout */
  }
}

@supports not (display: grid) {
  .modern-table {
    display: table;
    /* Traditional layout */
  }
}

Creative Layout Solutions

Card-Style Tables

Convert each row into an independent card on small screens:

@media (max-width: 600px) {
  .card-table, 
  .card-table tbody, 
  .card-table tr, 
  .card-table td {
    display: block;
  }
  .card-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
  }
  .card-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 100px;
  }
}

Expandable Row Content

.expandable-row .details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.expandable-row.active .details {
  max-height: 500px;
}

document.querySelectorAll('.expandable-row').forEach(row => {
  row.addEventListener('click', () => {
    row.classList.toggle('active');
  });
});