Materialize CSS Responsive Tables: Complete Guide (2026)

Quick answer: Materialize CSS has no dedicated table component — you style plain HTML tables by adding classes. Wrap your <table> in <div class="col s12"> inside a row, then add responsive-table to the table itself to get horizontal scrolling on screens under 992px. The striped, highlight, centered and bordered classes handle the common looks. If you were actually searching for a scrollable table in Angular Material (the mat-table component), jump to our dedicated scrollable table in Angular Material guide — the two frameworks are different things despite the similar names.

The two “material tables” people search for

Table-related searches split into two camps, and mixing them up wastes an afternoon:

Materialize is the plain-CSS framework; Angular Material is a component library for Angular apps that happens to share Google’s design language. This guide covers Materialize CSS end to end, then shows the Angular Material scroll pattern for readers who landed here from a mat-table scrollable search. New to the framework? The complete Materialize CSS tutorial covers setup and the grid in one afternoon.

Styling a table in Materialize CSS: the four classes

Start from a plain HTML table and add classes to the <table> tag itself:

<div class="row">
  <div class="col s12">
    <table class="striped highlight responsive-table">
      <thead>
        <tr><th>Student</th><th>Course</th><th>Grade</th></tr>
      </thead>
      <tbody>
        <tr><td>Asha</td><td>Bioinformatics</td><td>A</td></tr>
        <tr><td>Rahul</td><td>Web Development</td><td>B+</td></tr>
      </tbody>
    </table>
  </div>
</div>

The classes stack freely: class="striped highlight responsive-table" is the sensible default for data tables. Colors apply too — class="striped blue" tints the stripes with the standard Materialize color system.

Responsiveness: what responsive-table actually does

responsive-table is one CSS rule doing real work: below 992px the table’s wrapper becomes horizontally scrollable instead of letting columns crush. The rows stay rows, the user swipes sideways, and nothing overlaps. That behavior covers most cases, but know its limits:

• It scrolls the whole table. On a 6-column table the first columns swipe out of view — if those columns are identifiers (names, IDs), that is bad UX on phones.
• It does not stack. Unlike Bootstrap’s responsive-table (which reflows rows into cards under 768px), Materialize keeps tabular form. Stacking requires your own CSS or a different markup per breakpoint.
• Columns-size truth: if your table is squeezed on desktop, the culprit is usually a missing col s12 wrapper — the table inherits whatever width its container gives it. Our grid system guide explains the wrapper mechanics.

Wide tables on mobile: the identifier-column pattern

When the first column must stay visible while the rest scroll (order lists, student results, leaderboards), the standard trick is sticky columns plus a scroll container. Materialize does not ship this; here is the minimal version that works with it:

<div class="row">
  <div class="col s12 table-scroll">
    <table class="striped highlight">
      <!-- ... -->
    </table>
  </div>
</div>
<style>
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 700px; }
  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky; left: 0;
    background: #fff; /* match your theme */
  }
</style>

The min-width keeps columns readable instead of crushed, overflow-x: auto supplies the scroll (this is the same primitive Angular Material tables use), and the sticky first column keeps names visible while data swipes past. That is a dozen lines of CSS for the pattern users expect from data-heavy mobile tables.

For the mat-table searchers: scrollable tables in Angular Material

If your project is Angular, the component is mat-table and scrollability is deliberately manual — Angular Material wants you to own the layout. The canonical pattern from our scrollable table in Angular Material tutorial:

<div class="mat-elevation-z8 table-wrapper">
  <mat-table [dataSource]="students" class="mat-table-scrollable">
    <!-- columns as usual -->
  </mat-table>
</div>
<style>
  .table-wrapper { overflow: auto; max-height: 400px; }
  .mat-table-scrollable { min-width: 800px; }
  th.mat-header-cell { position: sticky; top: 0; background: #fff; }
</style>

Same primitives as the Materialize pattern — scroll container, min-width, sticky headers — just wired into Angular’s component model with mat-elevation-z8 supplying the shadow that z-depth-2 gives in Materialize.

Choosing the right responsive strategy

That last row is the honest advice: tables are for comparing across rows. If users only ever read one record at a time, a card list beats any responsive table. Learn when not to table and your mobile UIs get better than anything CSS can rescue.

If you want an instructor reviewing your responsive layouts and correcting these decisions with you in real time, Ampersand Academy teaches front-end development one-to-one, from first grid to production-quality mobile UIs.

Frequently asked questions