"IDD"
Bootstrap 3.2.0 Snippet by b0denk

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<p><img class="image-responsive img-center" src="images/stories/banner-idd.png" alt="" /></p>
<div class="row">
<div class="col-md-8 col-xs-12">
<div id="no-more-tables">
<table class="table-bordered table-striped table-condensed cf" cellspacing="0">
<thead class="cf">
<tr><th>Country</th><th>Prefix</th><th>Fixed <br /><small>(RM/30sec)</small></th><th>Mobile <br /><small>(RM/30sec)</small></th></tr>
</thead>
<tbody>
<tr>
<td data-title="Country">AFGHANISTAN</td>
<td data-title="Prefix">93</td>
<td class="numeric" data-title="Fixed (RM/30sec)">1.19</td>
<td class="numeric" data-title="Mobile (RM/30sec)">1.19</td>
</tr>
<tr>
<td data-title="Country">ALASKA</td>
<td data-title="Prefix">1907</td>
<td class="numeric" data-title="Fixed (RM/30sec)">0.24</td>
<td class="numeric" data-title="Mobile (RM/30sec)">0.24</td>
</tr>
<tr>
<td data-title="Country">ALBANIA</td>
<td data-title="Prefix">355</td>
<td class="numeric" data-title="Fixed (RM/30sec)">1.19</td>
<td class="numeric" data-title="Mobile (RM/30sec)">1.19</td>
</tr>
<tr>
<td data-title="Country">ALGERIA</td>
<td data-title="Prefix">213</td>
<td class="numeric" data-title="Fixed (RM/30sec)">1.19</td>
<td class="numeric" data-title="Mobile (RM/30sec)">1.19</td>
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
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Bootstrap Wizard

Questions / Comments: