How To Make Materialize CSS Table Responsive?
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
- Borderless Table
- Bordered Table
- Striped Table
- Highlight Table
- Centered Table
- 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.