<!-- Content Header (Page header) -->
|
<section class="content-header">
|
<h1>
|
Simple Tables
|
<small>preview of simple tables</small>
|
</h1>
|
<ol class="breadcrumb">
|
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
|
<li><a href="#">Tables</a></li>
|
<li class="active">Simple</li>
|
</ol>
|
</section>
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="row">
|
<div class="col-md-6">
|
<div class="box">
|
<div class="box-header with-border">
|
<h3 class="box-title">Bordered Table</h3>
|
</div>
|
<!-- /.box-header -->
|
<div class="box-body">
|
<table class="table table-bordered">
|
<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">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">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">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">90%</span></td>
|
</tr>
|
</table>
|
</div>
|
<!-- /.box-body -->
|
<div class="box-footer clearfix">
|
<ul class="pagination pagination-sm no-margin pull-right">
|
<li><a href="#">«</a></li>
|
<li><a href="#">1</a></li>
|
<li><a href="#">2</a></li>
|
<li><a href="#">3</a></li>
|
<li><a href="#">»</a></li>
|
</ul>
|
</div>
|
</div>
|
<!-- /.box -->
|
|
<div class="box">
|
<div class="box-header">
|
<h3 class="box-title">Condensed Full Width Table</h3>
|
</div>
|
<!-- /.box-header -->
|
<div class="box-body no-padding">
|
<table class="table table-condensed">
|
<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">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">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">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">90%</span></td>
|
</tr>
|
</table>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
</div>
|
<!-- /.col -->
|
<div class="col-md-6">
|
<div class="box">
|
<div class="box-header">
|
<h3 class="box-title">Simple Full Width Table</h3>
|
|
<div class="box-tools">
|
<ul class="pagination pagination-sm no-margin pull-right">
|
<li><a href="#">«</a></li>
|
<li><a href="#">1</a></li>
|
<li><a href="#">2</a></li>
|
<li><a href="#">3</a></li>
|
<li><a href="#">»</a></li>
|
</ul>
|
</div>
|
</div>
|
<!-- /.box-header -->
|
<div class="box-body no-padding">
|
<table class="table">
|
<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">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">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">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">90%</span></td>
|
</tr>
|
</table>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
|
<div class="box">
|
<div class="box-header">
|
<h3 class="box-title">Striped Full Width Table</h3>
|
</div>
|
<!-- /.box-header -->
|
<div class="box-body no-padding">
|
<table class="table table-striped">
|
<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">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">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">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">90%</span></td>
|
</tr>
|
</table>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
</div>
|
<!-- /.col -->
|
</div>
|
<!-- /.row -->
|
<div class="row">
|
<div class="col-xs-12">
|
<div class="box">
|
<div class="box-header">
|
<h3 class="box-title">Responsive Hover Table</h3>
|
|
<div class="box-tools">
|
<div class="input-group input-group-sm" style="width: 150px;">
|
<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
|
|
<div class="input-group-btn">
|
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- /.box-header -->
|
<div class="box-body table-responsive no-padding">
|
<table class="table table-hover">
|
<tr>
|
<th>ID</th>
|
<th>User</th>
|
<th>Date</th>
|
<th>Status</th>
|
<th>Reason</th>
|
</tr>
|
<tr>
|
<td>183</td>
|
<td>John Doe</td>
|
<td>11-7-2014</td>
|
<td><span class="label label-success">Approved</span></td>
|
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
</tr>
|
<tr>
|
<td>219</td>
|
<td>Alexander Pierce</td>
|
<td>11-7-2014</td>
|
<td><span class="label label-warning">Pending</span></td>
|
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
</tr>
|
<tr>
|
<td>657</td>
|
<td>Bob Doe</td>
|
<td>11-7-2014</td>
|
<td><span class="label label-primary">Approved</span></td>
|
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
</tr>
|
<tr>
|
<td>175</td>
|
<td>Mike Doe</td>
|
<td>11-7-2014</td>
|
<td><span class="label label-danger">Denied</span></td>
|
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
|
</tr>
|
</table>
|
</div>
|
<!-- /.box-body -->
|
</div>
|
<!-- /.box -->
|
</div>
|
</div>
|
</section>
|
<!-- /.content -->
|
