响应式屏幕下Table/Div布局适配难题求最优解决方案

Hey there! Great question—dealing with responsive tables that need a totally different structure on mobile is such a common pain point, and duplicating code is definitely not the way to go. Let’s break down the best, low-maintenance approaches to solve this without doubling your workload:

1. CSS Media Queries + Data Attributes (Optimal for Most Cases) #

This is my go-to solution because it uses a single set of HTML and completely restructures the layout with CSS—no redundant code, no JS required. The trick is to add data-label attributes to your table cells to mirror header text, then use CSS to reformat the table as card-like rows on mobile.

Example Code: #

HTML

<table class="responsive-table">
  <thead>
    <tr>
      <th data-label="Product">Product Name</th>
      <th data-label="Price">Price</th>
      <th data-label="Stock">In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Product">Wireless Headphones</td>
      <td data-label="Price">$99.99</td>
      <td data-label="Stock">12</td>
    </tr>
    <tr>
      <td data-label="Product">Bluetooth Speaker</td>
      <td data-label="Price">$49.99</td>
      <td data-label="Stock">28</td>
    </tr>
  </tbody>
</table>

CSS

/* Desktop: Keep standard table layout */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.responsive-table th, .responsive-table td {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  text-align: left;
}
.responsive-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* Mobile: Restructure into card-style rows */
@media (max-width: 768px) {
  /* Hide the desktop header */
  .responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Turn table rows into block-level cards */
  .responsive-table tr {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: white;
  }

  /* Make table cells block-level, with labels */
  .responsive-table td {
    display: block;
    text-align: right;
    padding: 0.75rem 1rem;
    position: relative;
    border: none;
  }

  /* Inject the header label before each cell value */
  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: 600;
    text-align: left;
    color: #666;
  }
}

Why this works: You’re reusing the same HTML structure, just rearranging how it’s displayed with CSS. It’s accessible, maintainable, and avoids duplicate content.

2. CSS Grid/Flexbox for Complex Layouts #

If your table has merged cells or non-standard structures that make the data-label approach tricky, use a semantic div-based layout with Grid or Flexbox. You can switch between grid templates at different breakpoints to mimic a table on desktop and a stacked layout on mobile.

Example Code: #

HTML

<div class="product-grid">
  <!-- Desktop "header" row -->
  <div class="grid-item header">
    <span>Product Name</span>
    <span>Price</span>
    <span>In Stock</span>
  </div>
  <!-- Data rows -->
  <div class="grid-item">
    <span class="mobile-label">Product Name:</span>
    <span>Wireless Headphones</span>
  </div>
  <div class="grid-item">
    <span class="mobile-label">Price:</span>
    <span>$99.99</span>
  </div>
  <div class="grid-item">
    <span class="mobile-label">In Stock:</span>
    <span>12</span>
  </div>
  <!-- Repeat for other products -->
</div>

CSS

/* Desktop: Grid layout mimicking a table */
.product-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.grid-item {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.grid-item.header {
  display: contents; /* Make header span grid columns */
}
.grid-item.header span {
  background-color: #f5f5f5;
  font-weight: 600;
  padding: 1rem;
  display: flex;
  align-items: center;
}
.mobile-label {
  display: none; /* Hide mobile labels on desktop */
}

/* Mobile: Stack items into card groups */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
    border: none;
  }
  .grid-item.header {
    display: none; /* Hide desktop header */
  }
  .grid-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-label {
    display: inline-block;
    font-weight: 600;
    color: #666;
  }
}

Why this works: It’s flexible for non-standard table structures, still uses one set of HTML, and keeps content semantic.

3. Conditional Rendering (Last Resort) #

Only use this if the structure difference is so extreme that CSS can’t restructure it (e.g., completely different content hierarchy). You can toggle visibility of desktop/mobile layouts with CSS, or use JS to load the appropriate layout based on screen size.

Example Code (CSS-only): #

<!-- Desktop Table -->
<table class="layout-desktop">
  <!-- Desktop table content -->
</table>

<!-- Mobile Layout -->
<div class="layout-mobile">
  <!-- Mobile-specific content structure -->
</div>

CSS

.layout-desktop { display: table; }
.layout-mobile { display: none; }

@media (max-width: 768px) {
  .layout-desktop { display: none; }
  .layout-mobile { display: block; }
}

Note: This adds redundant HTML, so only use it when other methods fail. Make sure content stays consistent across both layouts to avoid maintenance headaches.

Final Recommendation #

Start with the data-label + CSS media query approach—it’s the most efficient and maintainable for 90% of responsive table scenarios. Save Grid/Flexbox for complex layouts, and conditional rendering only for edge cases.

内容的提问来源于stack exchange，提问作者Shubham Shrivastava