"tabela no border "
Bootstrap 3.3.0 Snippet by strikerlg

<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 ----------> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-sm-4 sidebar1"> <div class="logo"> <img src="http://lorempixel.com/output/people-q-g-64-64-1.jpg" class="img-responsive center-block" alt="Logo"> </div> <br> <div class="left-navigation"> <ul class="list"> <h5><strong>CATEGORIES</strong></h5> <li>Full Schedule</li> <li>Programming</li> <li>Engineering</li> <li>Database</li> <li>Office</li> <li>Web & Design</li> <li>Business Skills</li> </ul> <br> <ul class="list"> <h5><strong>VENDORS</strong></h5> <li>Adobe</li> <li>Cisco</li> <li>CompTIA</li> <li>Tennis</li> <li>Crystal Reports</li> <li>EC-Council</li> <li>Google</li> <li>ITIL</li> <li>Java</li> <li>Javascript</li> <li>Juniper</li> <li>Kanban</li> <li>Linux</li> <li>Mac</li> <li>Microsoft</li> <li>Oracle</li> <li>Project Management Institute</li> <li>QuickBooks</li> <li>Scrum</li> <li>VMware</li> <li>VEEAM</li> </ul> </div> </div> <div class="col-md-10 col-sm-8 main-content"> <!--Main content code to be written here --> <h1>Schedule</h1> <div id="demo"> <!-- 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>Course Title</th> <th>Days</th> <th>Cost</th> <th>Register</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> </div> </div> </div> </body>
.sidebar1 { background: #253241; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#253241, rgba(0,82,110,1), #2e8b57); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#253241, rgba(0,82,110,1), #2e8b57); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#253241, rgba(0,82,110,1), #2e8b57); /* For Firefox 3.6 to 15 */ background: linear-gradient(#253241, rgba(0,82,110,1), #2e8b57); /* Standard syntax */ padding: 0px; min-height: 100%; } .logo { max-height: 130px; } .logo>img { margin-top: 30px; padding: 3px; border: 3px solid white; border-radius: 100%; } .list { color: #fff; list-style: none; padding-left: 0px; } .list::first-line { color: rgba(255, 255, 255, 0.5); } .list> li, h5 { padding: 5px 0px 5px 40px; } .list>li:hover { background-color: rgba(255, 255, 255, 0.2); border-left: 5px solid white; color: white; font-weight: bolder; padding-left: 35px; }.main-content{ text-align:center; } /*Table*/ /* -- 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; } }

Related: See More


Questions / Comments: