How to Make Table Responsive in Blogger - Mobile Friendly Table 2026

 

Post #122 table scrolls on mobile - bad UX. User must swipe. Responsive table stacks: on mobile, each row becomes card. No scroll, 100% mobile friendly, passes Core Web Vitals.

In Post #123, make Post #122 tables responsive.

Step 1: Update Table CSS for Responsive (Replace Post #122 CSS)

1. Blogger → Theme → Edit HTML
2. Find Post #122 CSS /* Tables Post 122 */ and replace with this:

/* Responsive Tables Post 123 */
.table-wrap{overflow-x:auto;margin:20px 0;border-radius:10px;border:1px solid #e5e7eb;}
.blogger-table{width:100%;border-collapse:collapse;min-width:500px;}
.blogger-table th{background:#000;color:#fff;padding:12px 14px;text-align:left;}
.blogger-table td{padding:12px 14px;border-bottom:1px solid #e5e7eb;}
.blogger-table tr:nth-child(even){background:#f9fafb;}
@media(max-width:600px){
  .blogger-table{min-width:100%;}
  .blogger-table thead{display:none;}
  .blogger-table, .blogger-table tbody, .blogger-table tr, .blogger-table td{display:block;width:100%;box-sizing:border-box;}
  .blogger-table tr{border:1px solid #e5e7eb;margin-bottom:12px;border-radius:10px;overflow:hidden;background:#fff!important;}
  .blogger-table td{border:none;border-bottom:1px solid #f3f4f6;position:relative;padding-left:50%;text-align:left;}
  .blogger-table td:before{content:attr(data-label);position:absolute;left:14px;width:45%;font-weight:bold;white-space:nowrap;}
  .blogger-table td:last-child{border-bottom:none;}
}

3. Save theme

Step 2: Responsive Table HTML - Add data-label for Mobile

Important: For responsive stacking, add data-label="Column Name" to each td.

<div class="table-wrap">
<table class="blogger-table">
<thead>
<tr><th>Feature</th><th>Blogger</th><th>WordPress</th></tr>
</thead>
<tbody>
<tr>
  <td data-label="Feature">Cost</td>
  <td data-label="Blogger">Free Forever</td>
  <td data-label="WordPress">$50/year hosting</td>
</tr>
<tr>
  <td data-label="Feature">Hosting</td>
  <td data-label="Blogger">Google Free</td>
  <td data-label="WordPress">Buy hosting</td>
</tr>
<tr>
  <td data-label="Feature">Security</td>
  <td data-label="Blogger">Google Security</td>
  <td data-label="WordPress">You manage</td>
</tr>
<tr>
  <td data-label="Feature">Best For</td>
  <td data-label="Blogger">Beginners</td>
  <td data-label="WordPress">Advanced</td>
</tr>
</tbody>
</table>
</div>

Step 3: How It Works on Mobile?

Device	How Table Shows
Desktop >600px	Normal table - 3 columns side by side
Mobile <600px	Each row = card Feature: Cost Blogger: Free Forever WordPress: $50/year → No horizontal scroll

Step 4: Pricing Table Responsive Version

<div class="table-wrap">
<table class="blogger-table">
<thead><tr><th>Plan</th><th>Price</th><th>Features</th></tr></thead>
<tbody>
<tr><td data-label="Plan">Free</td><td data-label="Price">₦0</td><td data-label="Features">1 Template</td></tr>
<tr><td data-label="Plan">Pro</td><td data-label="Price">₦5,000</td><td data-label="Features">200 Templates</td></tr>
<tr><td data-label="Plan">Bundle</td><td data-label="Price">₦10,000</td><td data-label="Features">Templates + Posts</td></tr>
</tbody>
</table>
</div>

Step 5: Test Responsive

1. Publish post → Open on phone or Chrome → Right click → Inspect → Toggle device toolbar (Ctrl+Shift+M)
2. Select iPhone 12 → Check table stacks as cards, no horizontal scroll
3. If still scrolls, you forgot data-label - add it

Step 6: Which Table to Use When?

• Post #122 scroll table: Use when many columns (5+ columns) - comparison of 5 hosts etc.
• Post #123 stacked table: Use when 2-4 columns - Blogger vs WordPress, Pricing, Pros Cons - best for mobile, SEO

Post #123 Complete - Tables now 100% mobile friendly.

Next Post #124 from your CSV: How to Add Border to Images in Blogger - styled images, shadow, rounded.