Simple Table preview of simple tables.

Basic Table

# First Name Last Name Username Role
1 Amit Sarna @mmits admin
2 Andrea Ely @andrea intern
3 Ricky Martin @ricky student
4 Pamila Roungue @pamila programmer
5 Steve john @steve developer
Show Code 

<div class="table-responsive">
<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Amit </td>
			<td>Sarna</td>
			<td>@mmits</td>
			<td><span class="badge badge-dark">admin</span> </td>
		</tr>
		<tr>
			<td>2</td>
			<td>Andrea</td>
			<td>Ely</td>
			<td>@andrea</td>
			<td><span class="badge badge-success">intern</span> </td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ricky </td>
			<td>Martin</td>
			<td>@ricky</td>
			<td><span class="badge badge-warning">student</span> </td>
		</tr>
		<tr>
			<td>4</td>
			<td>Pamila</td>
			<td>Roungue</td>
			<td>@pamila</td>
			<td><span class="badge badge-info">programmer</span> </td>
		</tr>
		<tr>
			<td>5</td>
			<td>Steve</td>
			<td>john</td>
			<td>@steve</td>
			<td><span class="badge badge-danger">developer</span> </td>
		</tr>

	</tbody>
</table>
</div>

Bordered Table use class .table-bordered

# Task Progress Label
1. Update software
55%
2. Clean database
70%
3. Cron job running
30%
4. Fix and squish bugs
90%
5. Pre Production
100%
Show Code 

<div class="table-responsive">
<table class="table table-bordered">
<tbody>
	<tr>
		<th style="width: 10px">#</th>
		<th>Task</th>
		<th>Progress</th>
		<th style="width: 40px">Label</th>
	</tr>
	<tr>
		<td>1.</td>
		<td>Update software</td>
		<td>
			<div class="progress progress-xs">
				<div class="progress-bar progress-bar-danger"
					 style="width: 55%"></div>
			</div>
		</td>
		<td><span class="badge bg-red vkBadge">55%</span></td>
	</tr>
	<tr>
		<td>2.</td>
		<td>Clean database</td>
		<td>
			<div class="progress progress-xs">
				<div class="progress-bar progress-bar-yellow"
					 style="width: 70%"></div>
			</div>
		</td>
		<td><span class="badge bg-yellow vkBadge">70%</span></td>
	</tr>
	<tr>
		<td>3.</td>
		<td>Cron job running</td>
		<td>
			<div class="progress progress-xs progress-striped active">
				<div class="progress-bar progress-bar-primary"
					 style="width: 30%"></div>
			</div>
		</td>
		<td><span class="badge bg-light-blue vkBadge">30%</span></td>
	</tr>
	<tr>
		<td>4.</td>
		<td>Fix and squish bugs</td>
		<td>
			<div class="progress progress-xs progress-striped active">
				<div class="progress-bar progress-bar-success"
					 style="width: 90%"></div>
			</div>
		</td>
		<td><span class="badge bg-green vkBadge">90%</span></td>
	</tr>
	<tr>
		<td>5.</td>
		<td>Pre Production </td>
		<td>
			<div class="progress progress-xs progress-striped active">
				<div class="progress-bar progress-bar-success"
					 style="width: 100%"></div>
			</div>
		</td>
		<td><span class="badge bg-green vkBadge">100%</span></td>
	</tr>
</tbody>
</table>
</div>

Responsive Hover Table use class .table-hover

ID User Date Status Reason
101 Mickey Rung 01-Jan-2021 Approved Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
102 Ely Franze 05-Feb-2021 Pending Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
103 Andrea Pame 12-Feb-2021 Approved Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
104 Steve megan 15-Feb-2021 Denied Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
Show Code 

<div class="table-responsive no-padding">
<table class="table table-hover">
<thead class="thead-light">
	<tr>
		<th>ID</th>
		<th>User</th>
		<th>Date</th>
		<th>Status</th>
		<th>Reason</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>101</td>
		<td>Mickey Rung</td>
		<td>01-Jan-2021</td>
		<td><span class="badge badge-success">Approved</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>102</td>
		<td>Ely Franze</td>
		<td>05-Feb-2021</td>
		<td><span class="badge badge-warning">Pending</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>103</td>
		<td>Andrea Pame</td>
		<td>12-Feb-2021</td>
		<td><span class="badge badge-primary">Approved</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>104</td>
		<td>Steve megan</td>
		<td>15-Feb-2021</td>
		<td><span class="badge badge-danger">Denied</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
</tbody>
</table>
</div>

Striped Full width Table with button use class .table-striped

# Emp Code Name Job Title Action
1. CH505 Endrea Ely HR Department
2. KH120 David ruge Developer
3. PG901 Anita Devi Accounts
4. WH787 Pamela Andrew UI Experts
Show Code 

<table class="table table-striped table-hover">
<tbody>
<tr>
	<th style="width: 10px">#</th>
	<th>Emp Code</th>
	<th>Name</th>
	<th>Job Title</th>
	<th>Action</th>
</tr>
<tr>
	<td>1.</td>
	<td>CH505</td>
	<td>Endrea Ely</td>
	<td>HR Department </td>
	<td>
		<a class="btn btn-primary text-white">
			<i data-feather="edit"></i>
		</a><a class="btn btn-danger text-white">
			<i data-feather="trash-2"></i>
		</a>
	</td>
</tr>
<tr>
	<td>2.</td>
	<td>KH120</td>
	<td>David ruge</td>
	<td>Developer </td>
	<td>
		<a class="btn btn-primary text-white">
			<i data-feather="edit"></i>
		</a><a class="btn btn-danger text-white">
			<i data-feather="trash-2"></i>
		</a>
	</td>
</tr>
<tr>
	<td>3.</td>
	<td>PG901</td>
	<td>Anita Devi</td>
	<td>Accounts </td>
	<td>
		<a class="btn btn-primary text-white">
			<i data-feather="edit"></i>
		</a><a class="btn btn-danger text-white">
			<i data-feather="trash-2"></i>
		</a>
	</td>
</tr>
<tr>
	<td>4.</td>
	<td>WH787</td>
	<td>Pamela Andrew</td>
	<td>UI Experts</td>
	<td>
		<a class="btn btn-primary text-white">
			<i data-feather="edit"></i>
		</a><a class="btn btn-danger text-white">
			<i data-feather="trash-2"></i>
		</a>
	</td>
</tr>
<tr>
	<td>5.</td>
	<td>AG876</td>
	<td>Ankit Jain </td>
	<td>Dev Ops </td>
	<td>
		<a class="btn btn-primary text-white">
			<i data-feather="edit"></i>
		</a><a class="btn btn-danger text-white">
			<i data-feather="trash-2"></i>
		</a>
	</td>
</tr>
</tbody>
</table>

Contexual Table add class ( .table-active, .table-success, .table-info, .table-warning, .table-danger )

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
Show Code 

<table class="table">
<thead>
	<tr>
		<th>#</th>
		<th>Column heading</th>
		<th>Column heading</th>
		<th>Column heading</th>
	</tr>
</thead>
<tbody>
	<tr class="table-active">
		<td scope="row">1</td>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-success">
		<td scope="row">2</td>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-info">
		<td scope="row">3</td>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-warning">
		<td scope="row">4</td>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-danger">
		<td scope="row">5</td>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
</tbody>
</table>

Responsive Dark table use class .table-dark

ID User Date Status Reason
101 Mickey Rung 01-Jan-2021 Approved Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
102 Ely Franze 05-Feb-2021 Pending Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
103 Andrea Pame 12-Feb-2021 Approved Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
104 Steve megan 15-Feb-2021 Denied Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.
Show Code 

<table class="table table-hover table-dark">
<tbody>
	<tr>
		<th>ID</th>
		<th>User</th>
		<th>Date</th>
		<th>Status</th>
		<th>Reason</th>
	</tr>
	<tr>
		<td>101</td>
		<td>Mickey Rung</td>
		<td>01-Jan-2021</td>
		<td><span class="badge badge-success">Approved</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>102</td>
		<td>Ely Franze</td>
		<td>05-Feb-2021</td>
		<td><span class="badge badge-warning">Pending</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>103</td>
		<td>Andrea Pame</td>
		<td>12-Feb-2021</td>
		<td><span class="badge badge-primary">Approved</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
	<tr>
		<td>104</td>
		<td>Steve megan</td>
		<td>15-Feb-2021</td>
		<td><span class="badge badge-danger">Denied</span></td>
		<td>
			Nam libero tempore, cum soluta nobis est eligendi optio cumque
			nihil impedit.
		</td>
	</tr>
</tbody>
</table>