"UL Tables"
Bootstrap 3.3.0 Snippet by marshallx

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">
<div class="listWrap">
<ul class="list">
<li>
<span>ID</span>
<span>Name</span>
<span>Logins</span>
<span>Role</span>
<span>Actions</span>
<span></span>
</li>
<li>
<span>23</span>
<span>Harry Giles</span>
<span>4341</span>
<span><span class="label label-warning">Manager</span></span>
<span>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default" disabled>Delete</button>
</div>
</span>
<span></span>
</li>
<li>
<span>543</span>
<span>Susan Crown</span>
<span>10032</span>
<span><span class="label label-default">Guest</span></span>
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
.container {
width: 100%;
height: 100%;
background-color: #d4d3d3;
padding: 20px;
}
.listWrap {
height: 800px;
width: 1000px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: table;
white-space: nowrap;
width: 100%;
}
.list li {
background-color: #f0f0f0;
display: table-row;
color: #5c5c5c;
}
.list li:nth-child(odd) {
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
$( document ).ready(function() {
initEvents();
});
function initEvents() {
$(".list").hover(function(){
$(".list li:first span").stop().animate({borderWidth: "5", backgroundColor: "#3f3659", color: "#e5e3e8"},{duration: 170, complete: function() {}} );
}, function () {
$(".list li:first span").stop().animate({borderWidth: "2", backgroundColor: "#201c2b", color: "#b8b5c0"},{duration: 170, complete: function() {}} );
});
}
function animateTable(e) {
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Dynamic Sortable Tables
Pricing Tables
Bootstrap 3.0. responsive pricing tables

Questions / Comments: