"bootstrap table overflow-y rwd"
Bootstrap 3.3.0 Snippet by floraya

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 ---------->
<table class="table table-striped table-rwd-name table-hidden">
<thead class="table-only-hide">
<tr>
<th></th>
<th width="150"></th>
<th width="200"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="">Col 1</td>
<td data-label="">Col 2</td>
<td data-label="">Col 3</td>
</tr>
<tr>
<td data-label="">Col 1</td>
<td data-label="">Col 2</td>
<td data-label="">Col 3</td>
</tr>
<tr>
<td data-label="">Col 1</td>
<td data-label="">Col 2</td>
<td data-label="">Col 3</td>
</tr>
<tr>
<td data-label="">Col 1</td>
<td data-label="">Col 2</td>
<td data-label="">Col 3</td>
</tr>
<tr>
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
/**/
.table-hidden tbody{
overflow-y: scroll;
height: 200px;
display: block;
}
.table-hidden tr {
width: 100%;
display: inline-table;
}
/*RWD*/
.table-rwd-name{background-color: rgba(255,255,255,0.5);}
.table-rwd-name tfoot th{
background-color: #FFF;
border-bottom: 1px solid #F90 !important;
text-align: left;
background-color: #fcf5e6;
}
@media (max-width: 736px) {
/*RWD*/
.table-rwd-name tr,
.table-rwd-name td,
.table-rwd-name th
{
display: block;
border-top: 0 !important;
}
.table-rwd-name td {
text-align: left;
font-size: 15px;
overflow: hidden;
width: 100%;
}
.table-rwd-name td:before {
content: attr(data-label);
float: left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: