Bootstrap response tables

by Steve Tarver

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body class="container">
    <div class="pull-right">
        <div id="windowSize"></div>
    </div>
     <h1>Responsive tables</h1>

     <h3>General notes</h3>

    <ul>
        <li>Device sizes xs
            <768, sm>=768, md >=992, lg >=1200</li>
        <li>This file includes media-font.css with @media screen queries to change font size</li>
        <li>Resize the windows to see responsive adjustments</li>
    </ul>
     <h3>Implementation guides</h3>

    <ul>
        <li>design for smallest device first</li>
        <li>you must specify grid classes for all th, td</li>
        <li>to get matched column widths, you must specify all grid classes up to full reveal.</li>
        <li>if your grid units > 12, rows will not wrap, the left most grid size wins</li>
    </ul>
    <hr>
     <h3>Table where unused columns disappear on smaller screens</h3>

    <ul>
        <li>hides sixth, seventh col on xs</li>
        <li>hides seventh on sm</li>
        <li>reveals all on md</li>
    </ul>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="col-xs-1 col-sm-1 col-md-1">first</th>
                <th class="col-xs-1 col-sm-1 col-md-1">second</th>
                <th class="col-xs-1 col-sm-1 col-md-1">third</th>
                <th class="col-xs-1 col-sm-1 col-md-1">fourth</th>
                <th class="col-xs-1 col-sm-1 col-md-1">fifth</th>
                <th class="hidden-xs col-sm-1 col-md-1">sixth</th>
                <th class="hidden-xs hidden-sm col-md-1">seventh</th>
                <th class="col-xs-1 col-sm-1 col-md-1">eighth</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-xs-1 col-sm-1 col-md-1">some value</td>
                <td class="col-xs-1 col-sm-1 col-md-1">some value</td>
                <td class="col-xs-1 col-sm-1 col-md-1">some value</td>
 ...

CSS

/* xs < 768 */
 @media screen and (max-width: 767px) {
    th, td {
        font-size: 0.9em;
    }
}
/* sm */
 @media screen and (min-width: 768px) {
    th, td {
        font-size: 1em;
    }
}
/* md */
 @media screen and (min-width: 992px) {
    th, td {
        font-size: 1.2em;
    }
}
/* lg */
 @media screen and (min-width: 1200px) {
    th, td {
        font-size: 1.3em;
    }
}

JavaScript

$(window).resize(function () {
    $("#windowSize").text($(window).width() + 'px x ' + $(window).height() + 'px');
});