How To Make Materialize CSS Table Responsive?

Materialize CSS Tables

Materialize CSS tables provide predefined classes such as .striped, .highlight, .centered, .responsive-table that are used to display different styles of tables.

Types Of Table Styles

1. Borderless Table
2. Bordered Table
3. Striped Table
4. Highlight Table
5. Centered Table
6. Responsive Table

Borderless Table

It is a basic table without borders. To create a borderless table, you do not need to add any predefined table class.

General Syntax

<table> </table>

Bordered Table

To create a bordered table, add .bordered class to the table element base class.

General Syntax

<table class="bordered"></table>

Striped Table

To create materialized CSS striped table, assign .striped class to the table base class.

General Syntax

<table class="striped"></table>

Materialize CSS Highlight Table

To create materialize CSS highlight table assign .highlight to the table element base class.

General Syntax

<table class="highlight"></table>

Materialize CSS Centered Table

To create materialized CSS centered table, assign .centered class to the table element base class.

General Syntax

<table class="centered"></table>

Materialize CSS Responsive Table

To create Materialize CSS responsive table, assign .responsive-table to the table element base class.

General Syntax

<table class="responsive-table"></table>

To read more about Materialize CSS Table, click here.