"Flex Table"
Bootstrap 3.3.0 Snippet by ayotwice

<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 ----------> <html lang="en"> <head> <meta charset="utf-8" /> <title>Table Style</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;"> </head> <body> <div class="table-title"> <h3>CHARGES</h3> </div> <table class="table-fill"> <thead> <tr> <th class="text-left">TRANSACTION VALUE</th> <th class="text-left">FEES</th> <th class="text-left">CAP (Max. ABDAFlex will charge)</th> </tr> </thead> <tbody class="table-hover"> <tr> <td class="text-left">LESS THAN ₦10000</td> <td class="text-left">6.5%</td> <td class="text-left">₦500</td> </tr> <tr> <td class="text-left">₦10001 - ₦50000</td> <td class="text-left">5.3%</td> <td class="text-left">₦2000</td> </tr> <tr> <td class="text-left">₦50001 - ₦200000</td> <td class="text-left">4.1%</td> <td class="text-left">₦6500</td> </tr> <tr> <td class="text-left">₦200001 - ₦500000</td> <td class="text-left">3.3%</td> <td class="text-left">₦10000</td> </tr> <tr> <td class="text-left">GREATER THAN ₦500001</td> <td class="text-left">2.1%</td> <td class="text-left">₦20000</td> </tr> </tbody> </table> </body>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { background-color: #3e94ec; font-family: "Roboto", helvetica, arial, sans-serif; font-size: 8px; font-weight: 100; text-rendering: optimizeLegibility; } div.table-title { display: block; margin: auto; max-width: 600px; padding:5px; width: 100%; } .table-title h3 { color: #fafafa; font-size: 30px; font-weight: 400; font-style:normal; font-family: "Roboto", helvetica, arial, sans-serif; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); text-transform:uppercase; } /*** Table Styles **/ .table-fill { background: white; border-radius:3px; border-collapse: collapse; height: 320px; margin: auto; max-width: 600px; padding:5px; width: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); animation: float 5s infinite; } th { color:#D5DDE5;; background:#1b1e24; border-bottom:4px solid #9ea7af; border-right: 1px solid #343a45; font-size:23px; font-weight: 100; padding:24px; text-align:left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align:middle; } th:first-child { border-top-left-radius:3px; } th:last-child { border-top-right-radius:3px; border-right:none; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color:#666B85; font-size:16px; font-weight:normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); } tr:hover td { background:#4E5066; color:#FFFFFF; border-top: 1px solid #22262e; border-bottom: 1px solid #22262e; } tr:first-child { border-top:none; } tr:last-child { border-bottom:none; } tr:nth-child(odd) td { background:#EBEBEB; } tr:nth-child(odd):hover td { background:#4E5066; } tr:last-child td:first-child { border-bottom-left-radius:3px; } tr:last-child td:last-child { border-bottom-right-radius:3px; } td { background:#FFFFFF; padding:20px; text-align:left; vertical-align:middle; font-weight:300; font-size:18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } td:last-child { border-right: 0px; } th.text-left { text-align: left; } th.text-center { text-align: center; } th.text-right { text-align: right; } td.text-left { text-align: left; } td.text-center { text-align: center; } td.text-right { text-align: right; }

Related: See More


Questions / Comments: