<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12"> <h2>Table with Progress Bar</h2> </div>
</div>
<div class="row">
<div class="col-md-12">
<div class="widget blank no-padding">
<div class="panel panel-default work-progress-table">
<!-- Default panel contents -->
<div class="panel-heading">Muhammad Mohsin Irshad<i>UI/UX Designer & Developer (isometric.mohsin@gmail.com)</i>
<div class="dropdown rounded">
<button class="btn btn-danger pull-right" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>
</div>
</div>
<!-- Table -->
<table id="mytable" class="table">
<thead>
<tr>
<th><input type="checkbox" id="checkall" /></th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th style="width:25%">Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Mohsin</td>
<td>+92-333-5586757</td>
<td>isometric.mohsin@gmail.com</td>
<td>
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="red progress-bar">
<span>60%</span>
</div>
</div>
</td>
<td><span class="label label-info">Pending</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Haseeb</td>
<td>+92-333-5586757</td>
<td>haseeb@gmail.com</td>
<td>
<div class="progress">
<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="green progress-bar">
<span>80%</span>
</div>
</div>
</td>
<td><span class="label label-primary">Due</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Hussain</td>
<td>+92-333-5586757</td>
<td>hussain@gmail.com</td>
<td>
<div class="progress">
<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="purple progress-bar">
<span>40%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Noman</td>
<td>+92-333-5586757</td>
<td>noman@gmail.com</td>
<td>
<div class="progress">
<div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="purple progress-bar">
<span>90%</span>
</div>
</div>
</td>
<td><span class="label label-success">Due</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Ubaid</td>
<td>+92-333-5586757</td>
<td>ubaid@gmail.com</td>
<td>
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="red progress-bar">
<span>60%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Adnan</td>
<td>+92-333-5586757</td>
<td>adnan@gmail.com</td>
<td>
<div class="progress">
<div style="width: 45%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="red progress-bar">
<span>45%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>Saboor</td>
<td>+92-333-5586757</td>
<td>saboor@gmail.com</td>
<td>
<div class="progress">
<div style="width: 89%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="89" role="progressbar" class="green progress-bar">
<span>89%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
.panel.work-progress-table > .panel-heading {
background: none repeat scroll 0 0 #efefef;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
color: #333333;
float: left;
font-family: roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.3px;
padding: 17px 30px 11px;
width: 100%;
}
.work-progress-table > .panel-heading > i {
color: #888888;
float: left;
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
line-height: 10px;
margin-bottom: 10px;
margin-top: 7px;
width: 100%;
}
.panel-default > .panel-heading > .dropdown {
float: right;
margin-top: -42px;
}
/* Work Progress table */
.panel.work-progress-table {
border: medium none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
box-shadow: none;
float: left;
margin: 0;
width: 100%;
}
.panel.work-progress-table > .panel-heading {
background: none repeat scroll 0 0 #efefef;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
color: #333333;
float: left;
font-family: roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.3px;
padding: 17px 30px 11px;
width: 100%;
}
.work-progress-table > .panel-heading > i {
color: #888888;
float: left;
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
line-height: 10px;
margin-bottom: 10px;
margin-top: 7px;
width: 100%;
}
.panel-default > .panel-heading > .dropdown {
float: right;
margin-top: -42px;
}
.work-progress-table td .progress {
background: none repeat scroll 0 0 #f3f3f3;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
height: 6px;
margin: 7px 0 0;
overflow: visible;
}
.work-progress-table td .progress > .progress-bar {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
position: relative;
}
.work-progress-table td .progress > .progress-bar > span {
background: none repeat scroll 0 0 #8d8d8d;
font-family: Roboto;
font-size: 10px;
height: 18px;
line-height: 18px;
margin-top: -9px;
position: absolute;
right: 0;
top: 50%;
width: 31px;
}
.work-progress-table .table td {
padding: 15px 10px;
}
.work-progress-table .table td {
font-family: Lato;
font-size: 13px;
letter-spacing: 0.3px;
padding: 15px 10px;
}
.red, .support-ticket .removed, .edit-remove > li > .remove, .friend-list li > span.offline:before {
background: -moz-linear-gradient(top, #ff5959 0%, #ff3b3b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b3b), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -o-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -ms-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: linear-gradient(to bottom, #ff5959 0%,#ff3b3b 100%);
color: #fff;
}
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
