Responsive Table (with Bootstrap)

index.html

<table class="table table-xs-responsive table-hover" summary="An example of a responsive table using Bootstrap breakpoints." aria-role="table">
<h1 class="text-center">Responsive Table</h1>
<caption class="text-center">Rather than using the overflow feature of the built in Bootstrap <code>.table-responsive</code>, this option will stack each cell at the set breakpoint.</caption>
  <thead>  
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  </thead>
  <tbody>
  <tr class="success">
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr class="info">
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
  <tr class="warning">
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
  </tbody>
</table>

responsive-table-with-bootstrap.markdown

Responsive Table (with Bootstrap)

A Pen by Jonathan Blundell on CodePen.

License.

style.css

@media screen and (max-width: 575px) {
.table-xs-responsive th, .table-xs-responsive td {
    width: 100% !important;
    display: block !important;
    box-sizing:border-box;
}
}

@media screen and (max-width: 767px) {
.table.table-sm-responsive th, .table.table-sm-responsive td {
    width: 100% !important;
    display: block !important;
    box-sizing:border-box;
}
}

@media screen and (max-width: 992px) {
.table.table-sm-responsive th, .table.table-sm-responsive td {
    width: 100% !important;
    display: block !important;
    box-sizing:border-box;
}
}

@media screen and (max-width: 1200px) {
.table.table-sm-responsive th, .table.table-sm-responsive td {
    width: 100% !important;
    display: block !important;
    box-sizing:border-box;
}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />