-
-
Save abitgone/3737755 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or 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
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0: | |
| } | |
| html { font: 13px/26px sans-serif; } | |
| sub { vertical-align: -0.15em; font-size: 0.8em; line-height: 0.8; } | |
| @media screen and (min-width: 569px) { | |
| th, | |
| td { padding: 6px 12px; } | |
| .debug * {outline:1px solid red;} | |
| .debug * * {outline-color:blue;} | |
| .debug * * * {outline-color:green;} | |
| .debug * * * *{outline-color:orange;} | |
| .debug * * * * *{outline-color:pink;} | |
| } | |
| @media screen and (max-width: 568px) { | |
| th, | |
| td { padding: 6px 12px; } | |
| .debug * {outline:1px solid red;} | |
| .debug * * {outline-color:blue;} | |
| .debug * * * {outline-color:green;} | |
| .debug * * * *{outline-color:orange;} | |
| .debug * * * * *{outline-color:pink;} | |
| .compare-table { | |
| width: 100%: | |
| overflow: auto; | |
| display: block; | |
| position: relative; | |
| } | |
| .compare-table thead { | |
| display: block; | |
| width: 12.5%; | |
| float: left; | |
| } | |
| .compare-table tbody { | |
| display: block; | |
| width: 87.5%; | |
| position: relative; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| .compare-table .header { width: 100%; } | |
| .compare-table .features-header { | |
| font-weight: bold; | |
| vertical-align: middle; | |
| text-align: left; | |
| overflow: hidden; | |
| } | |
| th.derivative { | |
| height: auto; | |
| overflow: visible; | |
| clear: both; | |
| padding: 0; | |
| } | |
| th.derivative > a { | |
| display: block; | |
| position: relative; | |
| } | |
| .compared-vehicle-title { | |
| display: block; | |
| width: 800%; /* (800% * 12.5% = 100%) */ | |
| height: 22px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 100; | |
| padding-left: 12px; | |
| line-height: 22px; | |
| text-align: left; | |
| color: #dae6ed; | |
| text-shadow: 0 -1px 0 #676e71; | |
| background-color: #899297; | |
| border-bottom: none; | |
| } | |
| .compared-vehicle-img { | |
| width: 100%; | |
| height: auto; | |
| vertical-align:bottom; | |
| margin-top: 22px; | |
| height: 51px; | |
| } | |
| .compare-table tr { | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| .compare-table th, | |
| .compare-table td { | |
| width: auto; | |
| margin: 0; | |
| vertical-align: top; | |
| } | |
| .compare-table th { | |
| display: block; | |
| text-align: left; | |
| } | |
| .compare-table td { | |
| display: block; | |
| height: 52px; | |
| margin-top: 21px; | |
| vertical-align: middle; | |
| text-align: left; | |
| } | |
| td.Data { text-align: center; } | |
| th.section { border-top: 0.077em dotted #efefef; } | |
| .compare-table td.Group { | |
| height: 326px; | |
| margin-top: 0; | |
| } | |
| } | |
This file contains hidden or 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
| <div class="debug"> | |
| <table class="table fancy-table compare-table"> | |
| <thead> | |
| <tr class="header"> | |
| <th class="features-header" title="Comparable feature list"> Features </th> | |
| <th class="derivative Data"> | |
| <a href="/" class="compared-vehicle-link"> | |
| <span class="compared-vehicle-title">Used Audi A3 Diesel 1.9 TDIe SE 3dr</span> | |
| <img src="http://placehold.it/140x80" class="compared-vehicle-img"> | |
| </a> | |
| </th> | |
| <th class="derivative Data"> | |
| <a href="/" class="compared-vehicle-link"> | |
| <span class="compared-vehicle-title">Used Honda CR-V Diesel 2.2 i-CTDi ES 5dr</span> | |
| <img src="http://placehold.it/140x80" class="compared-vehicle-img"> | |
| </a> | |
| </th> | |
| <th class="derivative Data"> | |
| <a href="/" class="compared-vehicle-link"> | |
| <span class="compared-vehicle-title">Used Honda CR-V Diesel 2.2 i-CTDi ES 5dr</span> | |
| <img src="http://placehold.it/140x80" class="compared-vehicle-img"> | |
| </a> | |
| </th> | |
| <th class="derivative Data"> | |
| <a href="/" class="compared-vehicle-link"> | |
| <span class="compared-vehicle-title">Used Toyota Aygo 1.0 VVT-i + 3dr</span> | |
| <img src="http://placehold.it/140x80" class="compared-vehicle-img"> | |
| </a> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr class="group-header nohover"> | |
| <td class="Group" colspan="5">Fuel Usage</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section"> Cost per Litre </th> | |
| <td class="Data Cap">120.40p</td> | |
| <td class="Data Cap">120.40p</td> | |
| <td class="Data Cap">120.40p</td> | |
| <td class="Data Cap">120.40p</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">Retail Price</th> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| <td class="Data Costs">£15,500</td> | |
| </tr> | |
| <tr> | |
| <th scope="row" class="section">CO<sub>2</sub></th> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| <td class="Data Emissions">C 119 g/km</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> |
This file contains hidden or 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
| {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment