AndaLabX
← Back to overview

Mobile-Friendly Table Generator

Create responsive tables in 5 easy steps

1

Enter Your Data

Swipe horizontally to see all columns→

2

Choose Mobile Style

3

Customize Colors

Color Presets

Custom Colors

4

Preview Your Table

Live Preview

Mobile View (375px)

Swipe left on carousel cards →

Table scrolls horizontally on mobile. Users see all columns by swiping left/right.

5

Get Your Code

Generated Code

Test
HTML + CSS

<!-- Generated with Mobile-Friendly Table Generator by InboundAlly -->
<!-- Get your own responsive tables at: https://inboundally.com/tools/mobile-table-generator -->
<style>
/* Horizontal Scroll - Responsive Table */
/* Generated by InboundAlly - Styles use !important to ensure they work on any site */

/* Reset and base wrapper styles */
.responsive-table-wrapper,
.responsive-table-wrapper *,
.table-container,
.table-container * {
  box-sizing: border-box !important;
}

.responsive-table-wrapper {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #1e293b !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  margin: 0 auto !important;
}

.responsive-table {
  width: 100% !important;
  min-width: max-content !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background-color: #ffffff !important;
  table-layout: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.responsive-table thead {
  background: linear-gradient(135deg, #f8fafc 0%, #eceeef 100%) !important;
  display: table-header-group !important;
}

.responsive-table tbody {
  display: table-row-group !important;
}

.responsive-table tr {
  display: table-row !important;
}

.responsive-table th {
  padding: 14px 18px !important;
  text-align: left !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  background: transparent !important;
  display: table-cell !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.responsive-table td {
  padding: 14px 18px !important;
  text-align: left !important;
  color: #475569 !important;
  font-size: 15px !important;
  border-bottom: 1px solid #edf4fc !important;
  background: transparent !important;
  display: table-cell !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.responsive-table tbody tr {
  transition: background-color 0.15s ease !important;
  background-color: #ffffff !important;
}

.responsive-table tbody tr:hover {
  background-color: #f8fafc !important;
}

.responsive-table tbody tr:last-child td {
  border-bottom: none !important;
}

.responsive-table tbody tr:nth-child(even) {
  background-color: #fafbfc !important;
}

.responsive-table tbody tr:nth-child(even):hover {
  background-color: #f3f3f4 !important;
}

/* Extra Large Desktop (1280px+) */
@media screen and (min-width: 1280px) {
  .responsive-table th,
  .responsive-table td {
    padding: 16px 20px !important;
    font-size: 15px !important;
  }
  .responsive-table th {
    font-size: 14px !important;
  }
}

/* Large Desktop (1024px - 1279px) */
@media screen and (max-width: 1279px) {
  .responsive-table th,
  .responsive-table td {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  .responsive-table th {
    font-size: 13px !important;
  }
}

/* Tablet (768px - 1023px) */
@media screen and (max-width: 1023px) {
  .table-container {
    border-radius: 10px !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .responsive-table th {
    font-size: 12px !important;
  }
}

/* Small Tablet / Large Phone (640px - 767px) */
@media screen and (max-width: 767px) {
  .table-container {
    position: relative !important;
    border-radius: 10px !important;
    /* Scroll shadow indicators */
    background:
      linear-gradient(to right, #ffffff 30%, transparent) !important,
      linear-gradient(to left, #ffffff 30%, transparent) !important,
      linear-gradient(to right, #e2e8f0, transparent) !important,
      linear-gradient(to left, #e2e8f0, transparent) !important;
    background-position: left center, right center, left center, right center !important;
    background-repeat: no-repeat !important;
    background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100% !important;
    background-attachment: local, local, scroll, scroll !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .responsive-table th {
    font-size: 11px !important;
  }
}

/* Phone (480px - 639px) */
@media screen and (max-width: 639px) {
  .table-container {
    border-radius: 8px !important;
    background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100% !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .responsive-table th {
    font-size: 11px !important;
  }
}

/* Small Phone (375px - 479px) */
@media screen and (max-width: 479px) {
  .table-container {
    border-radius: 8px !important;
    background-size: 25px 100%, 25px 100%, 12px 100%, 12px 100% !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 10px 10px !important;
    font-size: 12px !important;
  }
  .responsive-table th {
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
  }
}

/* Extra Small Phone (320px - 374px) */
@media screen and (max-width: 374px) {
  .table-container {
    border-radius: 6px !important;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100% !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 8px 8px !important;
    font-size: 11px !important;
  }
  .responsive-table th {
    font-size: 9px !important;
  }
}

/* Very Small Screen (under 320px) */
@media screen and (max-width: 319px) {
  .table-container {
    border-radius: 4px !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 6px 6px !important;
    font-size: 10px !important;
  }
  .responsive-table th {
    font-size: 8px !important;
  }
}
</style>

<div class="responsive-table-wrapper">
  <div class="table-container">
    <table class="responsive-table">
      <thead>
        <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Schema.org Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Table",
  "about": "Data Table",
  "numberOfRows": 2,
  "numberOfColumns": 3
}
</script>

How to Use

  1. Copy the code above or download the HTML file
  2. In WordPress, switch to the "Text" or "Code Editor" view
  3. Paste the code where you want the table to appear
  4. Preview your page to see the responsive table in action!

Works with WordPress, Webflow, Squarespace, Ghost, and any HTML-compatible CMS.

Need help?

Check out our FAQ section for common questions about using the table generator.

Want help with your growth systems?

We engineer AI systems that drive growth. Book a free strategy call to learn more.