Mobile-Friendly Table Generator

Create responsive tables in 5 easy steps

Enter Your Data

Swipe horizontally to see all columns→

Choose Mobile Style

Customize Colors

Color Presets

Custom Colors

Header Background

Header Text

Border Color

Row Even Background

Row Hover

Preview Your Table

Live Preview

Mobile View

Column 1	Column 2	Column 3

On mobile, each row transforms into a card with labeled fields.

Get Your Code

Table Title (for SEO - optional)

Generated Code

HTML + CSS


<!-- Generated with Mobile-Friendly Table Generator by InboundAlly -->
<!-- Get your own responsive tables at: https://inboundally.com/tools/mobile-table-generator -->
<style>
/* Card Stack - 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 * {
  box-sizing: border-box !important;
}

.responsive-table-wrapper {
  width: 100% !important;
  max-width: 100% !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;
}

.responsive-table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  table-layout: auto !important;
  margin: 0 !important;
  padding: 0 !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;
  word-wrap: break-word !important;
  overflow-wrap: break-word !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) {
  .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): Convert to cards */
@media screen and (max-width: 767px) {
  .responsive-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block !important;
    width: 100% !important;
  }

  .responsive-table thead {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .responsive-table tbody tr {
    margin-bottom: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    display: block !important;
  }

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

  .responsive-table tbody tr:hover {
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  .responsive-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #edf4fc !important;
    min-height: 48px !important;
    word-break: break-word !important;
    text-align: right !important;
    font-size: 14px !important;
    background-color: transparent !important;
  }

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

  .responsive-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    flex: 0 0 40% !important;
    padding-right: 12px !important;
    text-align: left !important;
    display: block !important;
  }
}

/* Phone (480px - 639px) */
@media screen and (max-width: 639px) {
  .responsive-table tbody tr {
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }

  .responsive-table td {
    padding: 12px 14px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .responsive-table td::before {
    font-size: 12px !important;
    flex: 0 0 38% !important;
  }
}

/* Small Phone (375px - 479px) */
@media screen and (max-width: 479px) {
  .responsive-table tbody tr {
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }

  .responsive-table td {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    min-height: auto !important;
  }

  .responsive-table td::before {
    flex: none !important;
    font-size: 11px !important;
    padding-right: 0 !important;
    margin-bottom: 2px !important;
    width: 100% !important;
  }
}

/* Extra Small Phone (320px - 374px) */
@media screen and (max-width: 374px) {
  .responsive-table-wrapper {
    font-size: 14px !important;
  }

  .responsive-table tbody tr {
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

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

  .responsive-table td::before {
    font-size: 10px !important;
  }
}

/* Very Small Screen (under 320px) */
@media screen and (max-width: 319px) {
  .responsive-table-wrapper {
    font-size: 13px !important;
  }

  .responsive-table tbody tr {
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .responsive-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .responsive-table td::before {
    font-size: 9px !important;
  }
}
</style>

<div class="responsive-table-wrapper">
  <table class="responsive-table">
    <thead>
      <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td data-label="Column 1"></td>
      <td data-label="Column 2"></td>
      <td data-label="Column 3"></td>
    </tr>
    <tr>
      <td data-label="Column 1"></td>
      <td data-label="Column 2"></td>
      <td data-label="Column 3"></td>
    </tr>
    </tbody>
  </table>
</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

Copy the code above or download the HTML file
In WordPress, switch to the "Text" or "Code Editor" view
Paste the code where you want the table to appear
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 more features?

We help scaling companies build organic growth systems. Book a free growth audit to learn more.