I have found that a product comparison table a great use for the responsive tables in Bootstrap 3. I have said before that tables shouldn’t be used for layout and they are hard to fit into a responsive design. It’s great to know that when you want to use a table in a design when appropriate, Bootstrap 3 has you covered.
I just
created one to show the different versions of [st] that I created. Here’s what the table looks like:
This looks like your usual product or pricing table you see on lots of product sites. If you view it on mobile, you will see the same table but it will be scrollable horizontally. The biggest win is the fact that this table won’t throw off the rest of your responsive design of your site.
I have also thrown together the code example into a Gist:
| <div class="table-responsive"> |
| <table class="table table-bordered"> |
| <thead> |
| <tr> |
| <th></th> |
| <th>Developer</th> |
| <th>Designer</th> |
| <th>Blogger</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Built in SEO</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>Bootstrap 2</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>Post Formats</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>Child Theme Ready</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>Minified CSS</td> |
| <td class="check">✓</td> |
| <td></td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>LESS files</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td></td> |
| </tr> |
| <tr> |
| <td>Minified JavaScript</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| <td class="check">✓</td> |
| </tr> |
| <tr> |
| <td>Development JavaScript</td> |
| <td class="check">✓</td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td>Grunt</td> |
| <td class="check">✓</td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td>Bower</td> |
| <td class="check">✓</td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td></td> |
| <td><a class="btn btn-danger" title="Standard Developer" href="http://jasonbradley.me/wp-content/uploads/standard-versions/developer/standard.zip">Developer Download</a></td> |
| <td><a class="btn btn-danger" title="Standard Designer" href="http://jasonbradley.me/wp-content/uploads/standard-versions/designer/standard.zip">Designer Download</a></td> |
| <td><a class="btn btn-danger" title="Standard Blogger" href="http://jasonbradley.me/wp-content/uploads/standard-versions/blogger/standard.zip">Blogger Download</a></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
Do you use tables on your site? Is your site responsive? http://jasonbradley.me/bootstrap-responsive-product-tables/
