Bootstrap Snippet Responsive Table with spaced sections using HTML CSS Bootstrap

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 ---------->
<div class="col-sm-6 col-md-6 col-sm-offset-3 col-md-offset-3">
    <table class="table stats caps">
        <thead>
            <tr>
                <td>Superhero</td>
                <td>Alter Ego</td>
                <td>Sidekick</td>
                <td>Vehicle</td>
            </tr>
        </thead>
        <tbody>
            <tr style="background:#e73a3f;color:#e6f0f9; border-radius:6px;"><!--Adjust bg and font colors inline-->
                <td>Batman</td>
                <td>Bruce Wayne</td>
                <td>Robin</td>
                <td>Batmobile</td>
            </tr>
            <!--Spacer-->
            <tr class="spacing">
                <td colspan="4"></td><!--Colspan should match width of your table-->
            </tr>
            <!--End Spacer-->
            <tr style="background: #d8e2ea;  border-radius:6px; color: #697880;"><!--Adjust bg and font colors inline-->
                <td>Spiderman</td>
                <td>Peter Parker</td>
                <td>N/A</td>
                <td>Web-Slinging</td>
            </tr>
            <!--Spacer-->
            <tr class="spacing">
                <td colspan="4"></td><!--Colspan should match width of your table-->
            </tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
table{margin:10px 0px; border:none !important;}
thead{font-weight:700;}
.table tbody>tr>td, .table tfoot>tr>td {padding: 8px; line-height: 1.428571429; vertical-align: top; border-top:none;}
.spacing{height:10px; background: transparent; content: none;}
@media (max-width: 632px){
 
    /*Responsive Table*/    
    thead{display: none;}
    tr:nth-of-type(odd) {background: #eee;}
    td, tr {display: block;}
    
    /*Column Section Titles*/
    .stats td:nth-of-type(1):before {content: "Superhero: ";}
    .stats td:nth-of-type(2):before {content: "Alter Ego: ";}
    .stats td:nth-of-type(3):before {content: "Sidekick: ";}
    .stats td:nth-of-type(4):before {content: "Vehicle: ";}
    
    .spacing td:before {content:" "!important;}
    /*Add More based on the number of columns you have*/
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Table with spaced sections"
Bootstrap 3.2.0 Snippet by girliestgeek

Related: See More

Questions / Comments:

"Responsive Table with spaced sections" Bootstrap 3.2.0 Snippet by girliestgeek

Related: See More

Questions / Comments:

"Responsive Table with spaced sections"
Bootstrap 3.2.0 Snippet by girliestgeek