Created
June 6, 2017 14:16
-
-
Save feux07/9e65297a01ca2ebd2b62e0e5fdf673c9 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yezigu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://code.jquery.com/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .special-date-td-wrapper{ | |
| min-height:72px; | |
| } | |
| .best-price{ | |
| font-size: 10px; | |
| background: #fad73c; | |
| border-radius: 5px; | |
| font-weight:bold; | |
| padding: 4px; | |
| margin: auto; | |
| max-width:70px; | |
| } | |
| .special-date-prev{ | |
| margin-left:3px; | |
| float: left; | |
| font-size:15px | |
| } | |
| .special-date-active{ | |
| background: rgb(102, 189, 90); | |
| color: white; | |
| } | |
| .special-calendar-price{ | |
| font-weight:bold; | |
| font-size: 14px; | |
| text-align:center; | |
| margin-top:8px; | |
| margin-bottom:4px; | |
| min-width:70px; | |
| } | |
| .special-calendar-day{ | |
| //float:left; | |
| text-align:left; | |
| margin-top:0px; | |
| font-size:12px; | |
| } | |
| .special-date-next{ | |
| margin-right:3px; | |
| float: right; | |
| font-size:15px | |
| } | |
| .special-date-month-name{ | |
| height:10px; | |
| margin-top:6px; | |
| display:inline-block; | |
| font-weight:bold; | |
| font-size:15px; | |
| } | |
| caption{ | |
| text-align: center; | |
| background:#e81c72; | |
| color: white; | |
| height: 50px; | |
| } | |
| caption>span{ | |
| margin-top:6px; | |
| } | |
| tr{ | |
| text-align: center; | |
| } | |
| th{ | |
| text-align: center; | |
| background:#ddd ; | |
| //color: white; | |
| vertical-align: middle!important; | |
| } | |
| td{ | |
| vertical-align: top!important; | |
| height: 70px!important; | |
| text-align:center; | |
| } | |
| td > div{ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <table class="table table-bordered "> | |
| <caption> | |
| <span class="special-date-prev">❮</span> | |
| <span class="special-date-month-name">June 2017</span> | |
| <span class="special-date-next">❯</span> | |
| </caption> | |
| <thead> | |
| <tr> | |
| <th>Mo</th> | |
| <th>Tu</th> | |
| <th>We</th> | |
| <th>Th</th> | |
| <th>Fr</th> | |
| <th>Sa</th> | |
| <th>Su</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="special-date-active"> | |
| <div class="special-calendar-day"> | |
| 1 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 2 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 1000 EUR | |
| </div> | |
| <div class="best-price">★ Best Price</div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 3 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 4 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 5 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 2000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 6 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3500 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 7 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="special-date-td-wrapper"> | |
| <div class="special-calendar-day"> | |
| 8 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 9 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 10 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 12 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 13 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 14 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| <td> | |
| <div class="special-calendar-day"> | |
| 15 | |
| </div> | |
| <div class="special-calendar-price"> | |
| 3000 EUR | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.special-date-td-wrapper{ | |
| min-height:72px; | |
| } | |
| .best-price{ | |
| font-size: 10px; | |
| background: #fad73c; | |
| border-radius: 5px; | |
| font-weight:bold; | |
| padding: 4px; | |
| margin: auto; | |
| max-width:70px; | |
| } | |
| .special-date-prev{ | |
| margin-left:3px; | |
| float: left; | |
| font-size:15px | |
| } | |
| .special-date-active{ | |
| background: rgb(102, 189, 90); | |
| color: white; | |
| } | |
| .special-calendar-price{ | |
| font-weight:bold; | |
| font-size: 14px; | |
| text-align:center; | |
| margin-top:8px; | |
| margin-bottom:4px; | |
| min-width:70px; | |
| } | |
| .special-calendar-day{ | |
| //float:left; | |
| text-align:left; | |
| margin-top:0px; | |
| font-size:12px; | |
| } | |
| .special-date-next{ | |
| margin-right:3px; | |
| float: right; | |
| font-size:15px | |
| } | |
| .special-date-month-name{ | |
| height:10px; | |
| margin-top:6px; | |
| display:inline-block; | |
| font-weight:bold; | |
| font-size:15px; | |
| } | |
| caption{ | |
| text-align: center; | |
| background:#e81c72; | |
| color: white; | |
| height: 50px; | |
| } | |
| caption>span{ | |
| margin-top:6px; | |
| } | |
| tr{ | |
| text-align: center; | |
| } | |
| th{ | |
| text-align: center; | |
| background:#ddd ; | |
| //color: white; | |
| vertical-align: middle!important; | |
| } | |
| td{ | |
| vertical-align: top!important; | |
| height: 70px!important; | |
| text-align:center; | |
| } | |
| td > div{ | |
| }</script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .special-date-td-wrapper{ | |
| min-height:72px; | |
| } | |
| .best-price{ | |
| font-size: 10px; | |
| background: #fad73c; | |
| border-radius: 5px; | |
| font-weight:bold; | |
| padding: 4px; | |
| margin: auto; | |
| max-width:70px; | |
| } | |
| .special-date-prev{ | |
| margin-left:3px; | |
| float: left; | |
| font-size:15px | |
| } | |
| .special-date-active{ | |
| background: rgb(102, 189, 90); | |
| color: white; | |
| } | |
| .special-calendar-price{ | |
| font-weight:bold; | |
| font-size: 14px; | |
| text-align:center; | |
| margin-top:8px; | |
| margin-bottom:4px; | |
| min-width:70px; | |
| } | |
| .special-calendar-day{ | |
| //float:left; | |
| text-align:left; | |
| margin-top:0px; | |
| font-size:12px; | |
| } | |
| .special-date-next{ | |
| margin-right:3px; | |
| float: right; | |
| font-size:15px | |
| } | |
| .special-date-month-name{ | |
| height:10px; | |
| margin-top:6px; | |
| display:inline-block; | |
| font-weight:bold; | |
| font-size:15px; | |
| } | |
| caption{ | |
| text-align: center; | |
| background:#e81c72; | |
| color: white; | |
| height: 50px; | |
| } | |
| caption>span{ | |
| margin-top:6px; | |
| } | |
| tr{ | |
| text-align: center; | |
| } | |
| th{ | |
| text-align: center; | |
| background:#ddd ; | |
| //color: white; | |
| vertical-align: middle!important; | |
| } | |
| td{ | |
| vertical-align: top!important; | |
| height: 70px!important; | |
| text-align:center; | |
| } | |
| td > div{ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment