<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <table class="table table-striped table-rwd-name table-hidden"> <thead class="table-only-hide"> <tr> <th>Product Name</th> <th width="150">Purchase quantity</th> <th width="200">unit price</th> </tr> </thead> <tbody> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> <tr> <td data-label="Product Name">Col 1</td> <td data-label="Purchase quantity">Col 2</td> <td data-label="unit price">Col 3</td> </tr> </tbody> </table> </div>

.table-hidden tbody{ overflow-y: scroll; height: 200px; display: block; } .table-hidden tr { width: 100%; display: inline-table; } .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) { .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; text-transform: uppercase; font-weight: bold; margin-right: 10px } thead.table-only-hide { display: none !important; } } @media (min-width: 736px) { .table-hidden td[data-label="Purchase quantity"]{ width:150px;} .table-hidden td[data-label="unit price"]{ width:183px;} }