"Assignment table"
Bootstrap 3.3.0 Snippet by VHTrung

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="mail-box">
<aside class="lg-side">
<div class="inbox-head">
<h3>Phân công cho tôi</h3>
<form action="#" class="pull-right position">
<div class="input-append">
<input type="text" class="sr-input" placeholder="Tìm kiếm">
<button class="btn sr-btn" type="button"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<div class="inbox-body">
<div class="mail-option">
<table class="table table-inbox">
<tbody style="background-color: #f0f0f0;">
<tr class="unread">
<th class="col-sm-2" class="align-top">Mã công việc</th>
<th class="view-message col-sm-3">Tên công việc</th>
<th class="col-sm-2">
<div class="text-center">Tình trạng</div>
<div class="text-center">
<div id="checkbutton" class="btn-group" data-toggle="buttons">
<label id="checkbutton" class="btn btn-xs done active filter show" data-target="done"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs doing active filter show" data-target="doing"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs late active filter show" data-target="late"><i class="glyphicon glyphicon-stop"></i></label>
<label id="checkbutton" class="btn btn-xs fail active filter show" data-target="fail"><i class="glyphicon glyphicon-stop"></i></label>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.product_view .modal-dialog{max-width: 800px; width: 100%;}
.product_edit .modal-dialog{max-width: 800px; width: 100%;}
.product_remove .modal-dialog{max-width: 300px; width: 100%;}
.pre-cost{text-decoration: line-through; color: #a5a5a5;}
.space-ten{padding: 10px 0;}
.mail-box {
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: fixed;
width: 100%;
}
.mail-box aside {
display: table-cell;
float: none;
height: 100%;
padding: 0;
vertical-align: top;
}
.mail-box .sm-side {
background: none repeat scroll 0 0 #e5e8ef;
border-radius: 4px 0 0 4px;
width: 25%;
}
.mail-box .lg-side {
background: none repeat scroll 0 0 #fff;
border-radius: 0 4px 4px 0;
width: 75%;
}
.mail-box .sm-side .user-head {
background: none repeat scroll 0 0 #00a8b3;
border-radius: 4px 0 0;
color: #fff;
min-height: 80px;
padding: 10px;
}
.user-head .inbox-avatar {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
function myFunction(x) {
$("#product_view").modal();
};
$(document).ready(function () {
$('.filter').on('click', function () {
var $target = $(this).data('target');
if ($(this).hasClass("show")) {
// $('.table-inside tr').css('display', 'none');
$('.table-inside tr[data-status="' + $target + '"]').fadeOut('slow');
$(this).removeClass("show");
}
else {
$('.table-inside tr[data-status="' + $target + '"]').css('display', 'none').fadeIn('slow');
$(this).addClass("show");
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Awesome Landing Page
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: