Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/dabblet.css

Created September 17, 2012 13:33
Show Gist options
  • Save mr-stezz/3737288 to your computer and use it in GitHub Desktop.
Save mr-stezz/3737288 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
* {
box-sizing: border-box;
padding: 0;
margin: 0:
}
html { font: 13px/26px sans-serif; }
sub { vertical-align: baseline; }
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: 16.6667%;
float: left;
}
.compare-table tbody {
display: block;
width: 83.33333%;
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;
}
th.derivative {
height: auto;
overflow: visible;
clear: both;
padding: 0;
}
th.derivative > a {
display: block;
position: relative;
}
.compared-vehicle-title {
display: block;
width: 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;
}
.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;
}
Raw
dabblet.html
<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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;15,500</td>
<td class="Data Costs">&pound;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>
Raw
settings.json
{"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