Tables

Responsive tables to display data of customer, products, and more.

---

Default table

id	Name	Email	Profession
1	John Smith	john@smith.com	Manager
2	Jane Doe	jane@doe.com	Designer
3	John Doe	john@doe.com	Developer
4	Jane Smith	jane@smith	Backend
5	Travis Johnson	travis@johnson.com	Frontend

<table class="table">
  <thead>
  <tr>
    <th>id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Profession</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>John Smith</td>
    <td>john@smith.com</td>
    <td>Manager</td>
  </tr>
  </tbody>
</table>

---

With the background and alternate color row table

id	Name	Email	Profession
1	John Smith	john@smith.com	Manager
2	Jane Doe	jane@doe.com	Designer
3	John Doe	john@doe.com	Developer
4	Jane Smith	jane@smith	Backend
5	Travis Johnson	travis@johnson.com	Frontend

<table class="table">
  <thead class="has-background">...</thead>
  <tbody class="tbody">...</tbody>
</table>

---

Bordered table

id	Name	Email	Profession
1	John Smith	john@smith.com	Manager
2	Jane Doe	jane@doe.com	Designer
3	John Doe	john@doe.com	Developer
4	Jane Smith	jane@smith	Backend
5	Travis Johnson	travis@johnson.com	Frontend

<table class="table is-bordered">
  ...
</table>

---

Just bottom border in each row table

id	Name	Email	Profession
1	John Smith	john@smith.com	Manager
2	Jane Doe	jane@doe.com	Designer
3	John Doe	john@doe.com	Developer
4	Jane Smith	jane@smith	Backend
5	Travis Johnson	travis@johnson.com	Frontend

<table class="table is-bottom-bordered">
  ...
</table>

Smooth table design

id	Name	Email	Profession
1	John Smith	john@smith.com	Manager
2	Jane Doe	jane@doe.com	Designer
3	John Doe	john@doe.com	Developer
4	Jane Smith	jane@smith	Backend
5	Travis Johnson	travis@johnson.com	Frontend

<table class="table is-smooth">
  ...
</table>

Responsive table

To add a responsive table just cover it with a div with table-container class. It works for mobile and desktop.

id	Name	Email	Profession	Address	Country	City	Phone number
1	John Smith	john@smith.com	Manager	Bronx 0001, Street Scouts Bouleavard	United States	New York	000-000-0000
2	Jane Doe	jane@doe.com	Designer	Bronx 0001, Street Scouts Bouleavard	United States	New York	000-000-0000
3	John Doe	john@doe.com	Developer	Bronx 0001, Street Scouts Bouleavard	United States	New York	000-000-0000
4	Jane Smith	jane@smith	Backend	Bronx 0001, Street Scouts Bouleavard	United States	New York	000-000-0000
5	Travis Johnson	travis@johnson.com	Frontend	Bronx 0001, Street Scouts Bouleavard	United States	New York	000-000-0000

<div class="table-container">
  <table class="table">
    ...
  </table>
</div>

Table with input checkbox

	id	Name	Email	Profession
	1	John Smith	john@smith.com	Manager
	2	Jane Doe	jane@doe.com	Designer
	3	John Doe	john@doe.com	Developer
	4	Jane Smith	jane@smith	Backend
	5	Travis Johnson	travis@johnson.com	Frontend