"Grid Card Materialize"
Bootstrap 3.3.0 Snippet by sshelzi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="demo"> <h1>Material Design Responsive Table</h1> <h2>Table of my other Material Design works (list was updated 08.2015)</h2> <!-- Responsive table starts here --> <!-- For correct display on small screens you must add 'data-title' to each 'td' in your table --> <div class="table-responsive-vertical shadow-z-1"> <!-- Table starts here --> <table id="table" class="table table-hover table-mc-light-blue"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Link</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td data-title="ID">1</td> <td data-title="Name">Material Design Color Palette</td> <td data-title="Link"> <a href="https://github.com/zavoloklom/material-design-color-palette" target="_blank">GitHub</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">2</td> <td data-title="Name">Material Design Iconic Font</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/uqCsB" target="_blank">Codepen</a> <a href="https://github.com/zavoloklom/material-design-iconic-font" target="_blank">GitHub</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">3</td> <td data-title="Name">Material Design Hierarchical Display</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/eNaEBM" target="_blank">Codepen</a> <a href="https://github.com/zavoloklom/material-design-hierarchical-display" target="_blank">GitHub</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">4</td> <td data-title="Name">Material Design Sidebar</td> <td data-title="Link"><a href="http://codepen.io/zavoloklom/pen/dIgco" target="_blank">Codepen</a></td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">5</td> <td data-title="Name">Material Design Tiles</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/wtApI" target="_blank">Codepen</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">6</td> <td data-title="Name">Material Design Typography</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/IkaFL" target="_blank">Codepen</a> <a href="https://github.com/zavoloklom/material-design-typography" target="_blank">GitHub</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">7</td> <td data-title="Name">Material Design Buttons</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/Gubja" target="_blank">Codepen</a> </td> <td data-title="Status">In progress</td> </tr> <tr> <td data-title="ID">8</td> <td data-title="Name">Material Design Form Elements</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/yaozl" target="_blank">Codepen</a> </td> <td data-title="Status">In progress</td> </tr> <tr> <td data-title="ID">9</td> <td data-title="Name">Material Design Email Template</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/qEVqzx" target="_blank">Codepen</a> </td> <td data-title="Status">Completed</td> </tr> <tr> <td data-title="ID">10</td> <td data-title="Name">Material Design Animation Timing (old one)</td> <td data-title="Link"> <a href="http://codepen.io/zavoloklom/pen/Jbrho" target="_blank">Codepen</a> </td> <td data-title="Status">Completed</td> </tr> </tbody> </table> </div> <!-- Table Constructor change table classes, you don't need it in your project --> <div style="width: 45%; display: inline-block; vertical-align: top"> <h2>Table Constructor</h2> <p> <label for="table-bordered">Style: bordered</label> <select id="table-bordered" name="table-bordered"> <option selected value="">No</option> <option value="table-bordered">Yes</option> </select> </p> <p> <label for="table-striped">Style: striped</label> <select id="table-striped" name="table-striped"> <option selected value="">No</option> <option value="table-striped">Yes</option> </select> </p> <p> <label for="table-hover">Style: hover</label> <select id="table-hover" name="table-hover"> <option value="">No</option> <option selected value="table-hover">Yes</option> </select> </p> <p> <label for="table-color">Style: color</label> <select id="table-color" name="table-color"> <option value="">Default</option> <option value="table-mc-red">Red</option> <option value="table-mc-pink">Pink</option> <option value="table-mc-purple">Purple</option> <option value="table-mc-deep-purple">Deep Purple</option> <option value="table-mc-indigo">Indigo</option> <option value="table-mc-blue">Blue</option> <option selected value="table-mc-light-blue">Light Blue</option> <option value="table-mc-cyan">Cyan</option> <option value="table-mc-teal">Teal</option> <option value="table-mc-green">Green</option> <option value="table-mc-light-green">Light Green</option> <option value="table-mc-lime">Lime</option> <option value="table-mc-yellow">Yellow</option> <option value="table-mc-amber">Amber</option> <option value="table-mc-orange">Orange</option> <option value="table-mc-deep-orange">Deep Orange</option> </select> </p> </div> <div style="width: 45%; display: inline-block; vertical-align: top; margin-left: 30px;"> <h2>Description</h2> <p>Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7</p> <p>You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.</p> <p class="mdt-subhead-2"><strong>Donate:</strong> You can support me via <a class="paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=s%2ekupletsky%40gmail%2ecom&lc=US&item_name=Material%20Design%20Responsive%20Table&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted">PayPal</a>, <a class="webmoney" href="https://funding.webmoney.ru/material-design-iconic-font/donate">WebMoney</a> or <a class="gratipay" href="http://gratipay.com/zavoloklom/" target="_blank">Gratipay</a></p> </div> </div>
/* -- import Roboto Font ---------------------------- */ @import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic"; /* -- You can use this tables in Bootstrap (v3) projects. -- */ /* -- Box model ------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* -- Demo style ------------------------------- */ html, body { position: relative; min-height: 100%; height: 100%; } html { position: relative; overflow-x: hidden; margin: 16px; padding: 0; min-height: 100%; font-size: 62.5%; } body { font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif; font-style: normal; font-weight: 300; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0.01rem; color: #212121; background-color: #f5f5f5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #demo { margin: 20px auto; max-width: 960px; } #demo h1 { font-size: 2.4rem; line-height: 3.2rem; letter-spacing: 0; font-weight: 300; color: #212121; text-transform: inherit; margin-bottom: 1rem; text-align: center; } #demo h2 { font-size: 1.5rem; line-height: 2.8rem; letter-spacing: 0.01rem; font-weight: 400; color: #212121; text-align: center; } .shadow-z-1 { -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); } /* -- Material Design Table style -------------- */ .table { width: 100%; max-width: 100%; margin-bottom: 2rem; background-color: #ffffff; } .table > thead > tr, .table > tbody > tr, .table > tfoot > tr { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { text-align: left; padding: 1.6rem; vertical-align: top; border-top: 0; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .table > thead > tr > th { font-weight: 400; color: #757575; vertical-align: bottom; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td { border-top: 0; } .table > tbody + tbody { border-top: 1px solid rgba(0, 0, 0, 0.12); } .table .table { background-color: #ffffff; } .table .no-border { border: 0; } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 0.8rem; } .table-bordered { border: 0; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 0; border-bottom: 1px solid #e0e0e0; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f5f5f5; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: rgba(0, 0, 0, 0.12); } @media screen and (max-width: 768px) { .table-responsive-vertical > .table { margin-bottom: 0; background-color: transparent; } .table-responsive-vertical > .table > thead, .table-responsive-vertical > .table > tfoot { display: none; } .table-responsive-vertical > .table > tbody { display: block; } .table-responsive-vertical > .table > tbody > tr { display: block; border: 1px solid #e0e0e0; border-radius: 2px; margin-bottom: 1.6rem; } .table-responsive-vertical > .table > tbody > tr > td { background-color: #ffffff; display: block; vertical-align: middle; text-align: right; } .table-responsive-vertical > .table > tbody > tr > td[data-title]:before { content: attr(data-title); float: left; font-size: inherit; font-weight: 400; color: #757575; } .table-responsive-vertical.shadow-z-1 { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .table-responsive-vertical.shadow-z-1 > .table > tbody > tr { border: none; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); } .table-responsive-vertical > .table-bordered { border: 0; } .table-responsive-vertical > .table-bordered > tbody > tr > td { border: 0; border-bottom: 1px solid #e0e0e0; } .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child { border-bottom: 0; } .table-responsive-vertical > .table-striped > tbody > tr > td, .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) { background-color: #f5f5f5; } .table-responsive-vertical > .table-hover > tbody > tr:hover > td, .table-responsive-vertical > .table-hover > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical > .table-hover > tbody > tr > td:hover { background-color: rgba(0, 0, 0, 0.12); } } .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th { background-color: #fde0dc; } .table-hover.table-mc-red > tbody > tr:hover > td, .table-hover.table-mc-red > tbody > tr:hover > th { background-color: #f9bdbb; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) { background-color: #fde0dc; } .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover { background-color: #f9bdbb; } } .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th { background-color: #fce4ec; } .table-hover.table-mc-pink > tbody > tr:hover > td, .table-hover.table-mc-pink > tbody > tr:hover > th { background-color: #f8bbd0; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) { background-color: #fce4ec; } .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover { background-color: #f8bbd0; } } .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th { background-color: #f3e5f5; } .table-hover.table-mc-purple > tbody > tr:hover > td, .table-hover.table-mc-purple > tbody > tr:hover > th { background-color: #e1bee7; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) { background-color: #f3e5f5; } .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover { background-color: #e1bee7; } } .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th { background-color: #ede7f6; } .table-hover.table-mc-deep-purple > tbody > tr:hover > td, .table-hover.table-mc-deep-purple > tbody > tr:hover > th { background-color: #d1c4e9; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) { background-color: #ede7f6; } .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover { background-color: #d1c4e9; } } .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th { background-color: #e8eaf6; } .table-hover.table-mc-indigo > tbody > tr:hover > td, .table-hover.table-mc-indigo > tbody > tr:hover > th { background-color: #c5cae9; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) { background-color: #e8eaf6; } .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover { background-color: #c5cae9; } } .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th { background-color: #e7e9fd; } .table-hover.table-mc-blue > tbody > tr:hover > td, .table-hover.table-mc-blue > tbody > tr:hover > th { background-color: #d0d9ff; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) { background-color: #e7e9fd; } .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover { background-color: #d0d9ff; } } .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th { background-color: #e1f5fe; } .table-hover.table-mc-light-blue > tbody > tr:hover > td, .table-hover.table-mc-light-blue > tbody > tr:hover > th { background-color: #b3e5fc; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) { background-color: #e1f5fe; } .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover { background-color: #b3e5fc; } } .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th { background-color: #e0f7fa; } .table-hover.table-mc-cyan > tbody > tr:hover > td, .table-hover.table-mc-cyan > tbody > tr:hover > th { background-color: #b2ebf2; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) { background-color: #e0f7fa; } .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover { background-color: #b2ebf2; } } .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th { background-color: #e0f2f1; } .table-hover.table-mc-teal > tbody > tr:hover > td, .table-hover.table-mc-teal > tbody > tr:hover > th { background-color: #b2dfdb; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) { background-color: #e0f2f1; } .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover { background-color: #b2dfdb; } } .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th { background-color: #d0f8ce; } .table-hover.table-mc-green > tbody > tr:hover > td, .table-hover.table-mc-green > tbody > tr:hover > th { background-color: #a3e9a4; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) { background-color: #d0f8ce; } .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover { background-color: #a3e9a4; } } .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th { background-color: #f1f8e9; } .table-hover.table-mc-light-green > tbody > tr:hover > td, .table-hover.table-mc-light-green > tbody > tr:hover > th { background-color: #dcedc8; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) { background-color: #f1f8e9; } .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover { background-color: #dcedc8; } } .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th { background-color: #f9fbe7; } .table-hover.table-mc-lime > tbody > tr:hover > td, .table-hover.table-mc-lime > tbody > tr:hover > th { background-color: #f0f4c3; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) { background-color: #f9fbe7; } .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover { background-color: #f0f4c3; } } .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th { background-color: #fffde7; } .table-hover.table-mc-yellow > tbody > tr:hover > td, .table-hover.table-mc-yellow > tbody > tr:hover > th { background-color: #fff9c4; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) { background-color: #fffde7; } .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover { background-color: #fff9c4; } } .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th { background-color: #fff8e1; } .table-hover.table-mc-amber > tbody > tr:hover > td, .table-hover.table-mc-amber > tbody > tr:hover > th { background-color: #ffecb3; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) { background-color: #fff8e1; } .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover { background-color: #ffecb3; } } .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th { background-color: #fff3e0; } .table-hover.table-mc-orange > tbody > tr:hover > td, .table-hover.table-mc-orange > tbody > tr:hover > th { background-color: #ffe0b2; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) { background-color: #fff3e0; } .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover { background-color: #ffe0b2; } } .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td, .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th { background-color: #fbe9e7; } .table-hover.table-mc-deep-orange > tbody > tr:hover > td, .table-hover.table-mc-deep-orange > tbody > tr:hover > th { background-color: #ffccbc; } @media screen and (max-width: 767px) { .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td, .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) { background-color: #ffffff; } .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) { background-color: #fbe9e7; } .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td, .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover { background-color: #ffffff; } .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover { background-color: #ffccbc; } }
/** * Created by Kupletsky Sergey on 05.11.14. * * Material Design Responsive Table * Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7 * You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style. * JS used only for table constructor: you don't need it in your project */ $(document).ready(function() { var table = $('#table'); // Table bordered $('#table-bordered').change(function() { var value = $( this ).val(); table.removeClass('table-bordered').addClass(value); }); // Table striped $('#table-striped').change(function() { var value = $( this ).val(); table.removeClass('table-striped').addClass(value); }); // Table hover $('#table-hover').change(function() { var value = $( this ).val(); table.removeClass('table-hover').addClass(value); }); // Table color $('#table-color').change(function() { var value = $(this).val(); table.removeClass(/^table-mc-/).addClass(value); }); }); // jQuery’s hasClass and removeClass on steroids // by Nikita Vasilyev // https://github.com/NV/jquery-regexp-classes (function(removeClass) { jQuery.fn.removeClass = function( value ) { if ( value && typeof value.test === "function" ) { for ( var i = 0, l = this.length; i < l; i++ ) { var elem = this[i]; if ( elem.nodeType === 1 && elem.className ) { var classNames = elem.className.split( /\s+/ ); for ( var n = classNames.length; n--; ) { if ( value.test(classNames[n]) ) { classNames.splice(n, 1); } } elem.className = jQuery.trim( classNames.join(" ") ); } } } else { removeClass.call(this, value); } return this; } })(jQuery.fn.removeClass);

Related: See More


Questions / Comments: